"Input Radios on Pills"
Bootstrap 3.3.0 Snippet by Artform

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"><div class="well"> <form class="form-horizontal"><fieldset> <div class="form-group"> <label class="col-md-2 control-label" for="gender">Gender</label> <div class="col-md-10"> <div class="input-group"> <div class="btn-group radio-group"> <label class="btn btn-primary not-active">Male <input type="radio" value="male" name="gender"></label> <label class="btn btn-primary not-active">Female <input type="radio" value="female" name="gender"></label> </div> </div> </div> </div> </fieldset></form> </div></div> </div> <div class="row"><div class="jumbotron"> <p>You can set a default by setting the radio to "selected" and remove the 'not-active' class from the label. I find this an elegant way of controlling radios since the "Sexy" version which I based this code on was really fugly inside. This also applies to humans, not just code. </p> </div></div> </div>
.radio-group label { overflow: hidden; } .radio-group input { /* This is on purpose for accessibility. Using display: hidden is evil. This makes things keyboard friendly right out tha box! */ height: 1px; width: 1px; position: absolute; top: -20px; } .radio-group .not-active { color: #3276b1; background-color: #fff; }
$(function() { // Input radio-group visual controls $('.radio-group label').on('click', function(){ $(this).removeClass('not-active').siblings().addClass('not-active'); }); });

Related: See More

Questions / Comments: