"Badge style checkboxes (no js)"
Bootstrap 3.0.0 Snippet by deap82

<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; }

Related: See More


Questions / Comments:

I guess we need to add a 4th point in Usage:
4. Surround the <label>s with <div class="checkbox">

(I am using Django and rendering forms dynamically and struggled a bit to figure the above out)

Anupam Jain () - 2 years ago - Reply 0