<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"> <h2>simple radio switch based only on CSS<br /> <small>inspired by @tonetlds work, but this solution uses :checked state and NOT relay on "active" class added by js to .btn element.</small </h2> </div> <div class="well well-sm text-center"> <h3>Radio:</h3> <div class="dlk-radio btn-group"> <label class="btn btn-success"> <input name="choices[1]" class="form-control" type="radio" value="1"> <i class="fa fa-check glyphicon glyphicon-ok"></i> </label> <label class="btn btn-default"> <input name="choices[1]" class="form-control" type="radio" value="2" defaultchecked="checked"> <i class="fa fa-times glyphicon glyphicon-remove"></i> </label> <label class="btn btn-info"> <input name="choices[1]" class="form-control" type="radio" value="3" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-ok"></i> </label> <label class="btn btn-warning"> <input name="choices[1]" class="form-control" type="radio" value="4" defaultchecked="checked"> <i class="fa fa-times glyphicon glyphicon-remove"></i> can be labeled </label> <label class="btn btn-danger"> <input name="choices[1]" class="form-control" type="radio" value="0" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-remove"></i> </label> </div> </div> <br /> <div class="well well-sm text-center"> <h3>Checkbox:</h3> <div class="dlk-radio btn-group"> <label class="btn btn-success"> <input name="choices[2][]" class="form-control" type="checkbox" value="1"> <i class="fa fa-check glyphicon glyphicon-ok"></i> also </label> <label class="btn btn-default"> <input name="choices[2][]" class="form-control" type="checkbox" value="2" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-ok"></i> can </label> <label class="btn btn-info"> <input name="choices[2][]" class="form-control" type="checkbox" value="3" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-ok"></i> got </label> <label class="btn btn-warning"> <input name="choices[2][]" class="form-control" type="checkbox" value="4" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-ok"></i> own </label> <label class="btn btn-danger"> <input name="choices[1]" class="form-control" type="checkbox" value="0" defaultchecked="checked"> <i class="fa fa-check glyphicon glyphicon-ok"></i> title </label> </div> </div> </div>

.dlk-radio input[type="radio"], .dlk-radio input[type="checkbox"] { margin-left:-99999px; display:none; } .dlk-radio input[type="radio"] + .fa , .dlk-radio input[type="checkbox"] + .fa { opacity:0.15 } .dlk-radio input[type="radio"]:checked + .fa, .dlk-radio input[type="checkbox"]:checked + .fa{ opacity:1 }