"Input Radios on Pills"
Bootstrap 3.3.0 Snippet by Artform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
$(function() {
// Input radio-group visual controls
$('.radio-group label').on('click', function(){
$(this).removeClass('not-active').siblings().addClass('not-active');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: