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

<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"> <div class="btn-group"> <button class="btn btn-default" type="button">Печать</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Всё</a></li> <li class="divider"></li> <li><a href="#">Документ 1</a></li> <li><a href="#">Документ 2</a></li> </ul> </div> </div> </div>
/* Hiding the checkbox, but allowing it to be focused */ .badgebox { opacity: 0; } .badgebox + .badge { /* Move the check mark away when unchecked */ text-indent: -999999px; /* Makes the badge's width stay the same checked and unchecked */ width: 27px; } .badgebox:focus + .badge { /* Set something to make the badge looks focused */ /* This really depends on the application, in my case it was: */ /* Adding a light border */ box-shadow: inset 0px 0px 5px; /* Taking the difference out of the padding */ } .badgebox:checked + .badge { /* Move the check mark back when checked */ text-indent: 0; } .btn-labeled {padding-right: 10}
// You didn't believe it hadn't used JS, uh?

Related: See More


Questions / Comments: