2014-06-13 24 views
2

我的問題是我不能讓單選按鈕有一個紅色邊框,如果jquery驗證激活就像在示例圖片。任何人都可以幫助我請這個。如何將jquery驗證激活的單選按鈕中的紅色邊框

http://i38.photobucket.com/albums/e149/eloginko/gender_zps0b3bea26.png

電流輸出:http://jsfiddle.net/5kcsn/47/

我tride這一點,但沒有工作

.radio-class{ 
    border: solid 1px #a94442; 
} 
+0

所有的瀏覽器不支持直接CSS無線電元件。您可以使用此... http://www.csscheckbox.com/radio-buttons/0/ – Shail

+0

請不要發佈重複的問題。 – Sparky

回答

2

不能添加邊框單選按鈕,但你可以去,

input[type="radio"]:focus, input[type="radio"]:active { 
    -webkit-box-shadow:inset 2px 1px 1px , 1px 1px 3px #008000; 
    -moz-box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000; 
    box-shadow:inset 2px 1px 1px #008000, 1px 1px 3px #008000; 
} 
0

試試這個..這不會創建紅圈單選按鈕,但幫助用戶瞭解所需的領域。

<form> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-11"> 
       <br /> 
       <div class="row"> 
        <div class="col-sm-7"> 
         <div class="form-group"> 
          <input type="text" id="name" class="form-control" name="name" placeholder="Your Name" required="required" /> 
         </div> 
        </div> 
        <div class="col-sm-7"> 
         <div class="form-group"> 
          <input type="text" id="age" class="form-control" name="age" placeholder="Your Age" required="required" /> 
         </div> 
        </div> 
        <div class="col-sm-12"> 
         <div class="form-group input-group"> 
          <input type="radio" name="gender" value="male" required="required" /> 
          <label id="myGender">&nbsp;Male&nbsp;&nbsp;</label> 
          <input type="radio" name="gender" value="female" required="required" /> 
          <label id="myGender">&nbsp;Female</label> 
          <p class="help-block"> Please Choose your gender</p> 
         </div> 

        </div> 
        <div class="col-sm-12 dateWrap"> 
         <div class="form-group input-group"> 
          <div class="btn-group input-group"> <span class="input-group-addon fixedSize">Birthday</span> 

           <select name="month" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bmonth"> 
            <option value="">Month</option> 
           </select> 
           <select name="day" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bday"> 
            <option value="">Day</option> 
           </select> 
           <select name="year" onmousedown="if(this.options.length>6){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="byear"> 
            <option value="">Year</option> 
           </select> 
          </div> 
         </div> 
        </div> 
        <div class="col-sm-12"> 
         <div class="form-group input-group"> 
          <button type="submit" class="btn btn-info input-default" id="create">Submit</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

http://jsfiddle.net/alaskaz1864/5kcsn/51/

0

使用箱陰影邊框顏色

<input type="radio" required="required" value="female" name="gender" style="box-shadow: 0px 2px 8px rgb(255, 0, 0);">