<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
<section>
<h1>Badge style checkboxes</h1>
<p>Builds upon the existing "badge" class to create toggle-like buttons for checkboxes. When a checkbox is selected, the badge will be filled, when not the badge will be outlined.
For disabled checkboxes the badge will have 50% opacity. The snippet uses HTML and CSS only to accomplish this.</p>
</section>
<section>
<h2>Examples</h2>
<div class="form-group badge-checkboxes">
<label>Select some options - stacked checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="badge">Option 1</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked="">
<span class="badge">Option 2</span>
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled="">
<span class="badge">Option 3</span>
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled="" checked="">
<span class="badge">Option 4</span>
</label>
</div>
</div>
<div class="form-group badge-checkboxes">
<label>Select some options - inline checkboxes</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" value="">
<span class="badge">Option 1</span>
</label>
<label class="checkbox-inline">
<input type="checkbox" value="" checked="">
<span class="badge">Option 2</span>
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" value="" disabled="">
<span class="badge">Option 3</span>
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" value="" disabled="" checked="">
<span class="badge">Option 4</span>
</label>
</div>
</div>
</section>
<section>
<h2>Keyboard support</h2>
<p>
Tabbing to the badge labels still works because the checkboxes are hidden but not <em>undisplayed</em>.
Press space to select/deselect when a badge has the dashed border indicating it's active.
</p>
<input type="text" placeholder="tab from this text input" />
<div class="form-group badge-checkboxes">
<label>Select some options</label>
<div>
<label class="checkbox-inline"><input type="checkbox" value=""><span class="badge">Option 1</span></label>
<label class="checkbox-inline"><input type="checkbox" value=""><span class="badge">Option 2</span></label>
<label class="checkbox-inline"><input type="checkbox" value=""><span class="badge">Option 3</span></label>
<label class="checkbox-inline"><input type="checkbox" value="""><span class="badge">Option 4</span></label>
<label class="checkbox-inline"><input type="checkbox" value=""><span class="badge">Option 5</span></label>
</div>
</div>
</section>
<section>
<h2>Usage</h2>
<ol>
<li>Include the css of this snippet in your page. Some css can be removed if you use bootstrap >= 3.2.0.</li>
<li>Add the "badge-checkboxes" class to an element that surrounds your checkboxes, for example the "form-group" element of the field.</li>
<li>Surround the text for each check box with an extra span element that has the class "badge".</li>
</ol>
</section>
<section>
<h2>Additional documentation</h2>
<p>See comments in the css.</p>
</section>
<section>
<h2>Disclaimer</h2>
<p>The CSS uses features that requires an up-to-date browser. This snippet has not been tested in older browsers.</p>
</section>
</div>
.badge-checkboxes .checkbox input[type="checkbox"],
.badge-checkboxes label.checkbox-inline input[type="checkbox"] {
/* Hide the checkbox, but keeps tabbing to it possible. */
position: absolute;
clip: rect(0 0 0 0);
}
.badge-checkboxes .checkbox label,
.badge-checkboxes label.checkbox-inline {
padding-left:0; /* Remove space normally used for the checkbox */
}
.badge-checkboxes .checkbox input[type="checkbox"]:checked:focus + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:checked:focus + .badge {
box-shadow:0 0 2pt 1pt #333; /* Outline when checkbox is focused/tabbed to */
}
.badge-checkboxes .checkbox input[type="checkbox"]:focus + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:focus + .badge {
box-shadow:0 0 2pt 1pt #999; /* Outline when checkbox is focused/tabbed to */
}
.badge-checkboxes .checkbox input[type="checkbox"] + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"] + .badge {
border:1px solid #999; /* Add outline to badge */
/* Make text in badge not selectable */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Give badges for disabled checkboxes an opacity of 50% */
.badge-checkboxes .checkbox input[type="checkbox"]:disabled + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:disabled + .badge
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
/* Remove badge background-color and set text color for not checked options */
.badge-checkboxes .checkbox input[type="checkbox"]:not(:checked) + .badge,
.badge-checkboxes label.checkbox-inline input[type="checkbox"]:not(:checked) + .badge{
background-color:Transparent;
color:#999;
}
/*The following css only required for Bootstrap <= 3.1.0 */
.badge-checkboxes .checkbox {
padding-left:0; /* Remove space normally used for the checkbox */
}
.badge-checkboxes .disabled label,
.badge-checkboxes label.checkbox-inline.disabled {
cursor:not-allowed
}
/* The following CSS not required for the badge styled checkboxes: */
section + section {
margin-top:20px;
}
label + .checkbox {
margin-top:0;
}
h2 {
font-size:18px;
font-weight:bold;
}
