"Badgebox: CSS checkbox badge"
Bootstrap 3.3.0 Snippet by souravray

<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 text-center"> <br> <br> <h1>Badgebox: CSS only checkbox badge!</h1> <h2>Works on Bootstrap 2.3.2 and up</h2> <br> <label for="default" class="btn btn-default"> <input type="checkbox" id="default" class="badgebox"><span class="badger">Default</span></label> <label for="primary" class="btn btn-default">Primary <input type="checkbox" id="primary" class="badgebox"></label> <label for="info" class="btn btn-default">Info <input type="checkbox" id="info" class="badgebox"></label> <label for="success" class="btn btn-default">Success <input type="checkbox" id="success" class="badgebox"></label> <label for="warning" class="btn btn-default">Warning <input type="checkbox" id="warning" class="badgebox"></label> <label for="danger" class="btn btn-default">Danger <input type="checkbox" id="danger" class="badgebox"></label> </div> </div>
/* Hiding the checkbox, but allowing it to be focused */ .btn-default { padding: 0; border: 0 none; height: 40px; background: red; } .badger { margin: 0 !important; width:100%; height: 100%; color: #333 !important; display: block; } .badgebox { display: none; } .badgebox + .badger { background: #fff; } .badgebox:focus + .badger { background: #ccc; } .badgebox:checked + .badger { background: #ddd; }
// You didn't believe it hadn't used JS, uh?

Related: See More


Questions / Comments: