試試這個..這不會創建紅圈單選按鈕,但幫助用戶瞭解所需的領域。
<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"> Male </label>
<input type="radio" name="gender" value="female" required="required" />
<label id="myGender"> 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/
所有的瀏覽器不支持直接CSS無線電元件。您可以使用此... http://www.csscheckbox.com/radio-buttons/0/ – Shail
請不要發佈重複的問題。 – Sparky