<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">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">&check;</span></label> <label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">&check;</span></label> <label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">&check;</span></label> <label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">&check;</span></label> <label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">&check;</span></label> <label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">&check;</span></label> </div> <div class="row"> <div class="col-md-5 column" style="background-color:blue"> <!--style="position: absolute;top: 8px;right: -15px;"--> <label for="default2" class="btn btn-info">Default <input type="checkbox" id="default2" class="badgebox"><span class="badge">&check;</span></label> <label for="default3" class="btn btn-info">Is Enabled <input type="checkbox" id="default3" class="badgebox"><span class="badge">&check;</span></label> <label for="default4" class="btn btn-info">Default <input type="checkbox" id="default4" class="badgebox"><span class="badge">&check;</span></label> </div> <div class="col-md-5 column" style="background-color:green"> <div> <button type="button" class="btn btn-info btn-xs stack-vertical" (click)="mixService.onMoveSegment(segment,'up')"><span class="glyphicon glyphicon-menu-up"></span></button> <button type="button" class="btn btn-info btn-xs stack-vertical" (click)="mixService.onMoveSegment(segment,'down')"><span class="glyphicon glyphicon-menu-down"></span></button> </div> <div> <button type="button" class="btn btn-primary btn-xs stack-horizontal" (click)="onPlaySegment(segment)">Play </button> </div> </div> <div class="col-md-2 column" style="background-color:grey"> <h3>col-md-5</h3> </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; }

// You didn't believe it hadn't used JS, uh?