"Checkbox and radios pure css"
Bootstrap 3.2.0 Snippet by Tdude

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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>Bootstrap with Font awesome checkbox in pure css</h2> </div> <div class="row pt-50 pl-50"> <p>THIS WORKS DOWN TO IE9, but bootsnipps FontAwesome version seems a bit outdated. I've used 4.2.0. You have to try this in another environment.</p> <p>What's cool about this? No extra html markup! Font awesome character values inserted with CSS "content". You can use your own svg's to make it more interesting.</p> <!-- A degradeable list of checkboxes --> <ul class="checkboxes"> <li> <input type="checkbox" name="1" id="c1" class="checkbox" /> <label for="c1">Do this</label> </li> <li> <input type="checkbox" name="2" id="c2" class="checkbox" /> <label for="c2">Check that</label> </li> <li> <input type="checkbox" name="3" id="c3" class="checkbox" /> <label for="c3">And this</label> </li> </ul> <ul class="radiobuttons"> <li> <input type="radio" name="group1" id="r1" class="radio" /> <label for="r1">Either this</label> </li> <li> <input type="radio" name="group1" id="r2" class="radio" /> <label for="r2">Or this</label> </li> </ul> <ul class="toggle"> <li> <input type="radio" name="group2" id="t1" class="radio" /> <label for="t1">Toggle this</label> </li> <li> <input type="radio" name="group2" id="t2" class="radio" /> <label for="t2">Or maybe this</label> </li> </ul> </div> </div>
/* Based on or inspired from the following (among others): http://www.andwecode.com/custom-checkbox-radio-with-icon-fonts/ http://jsfiddle.net/8PYJg/ http://fortawesome.github.io/Font-Awesome/examples/ http://cssdeck.com/labs/custom-radiobutton-and-checkbox-with-fontawesome-full-style-solution http://cssdeck.com/labs/css-checkbox-styles http://astronautweb.co/snippet/font-awesome/ */ ul { padding: 0!important;} ul li { list-style-type: none; margin: 0; padding: .5em; } input[type="checkbox"], input[type="radio"] { display: none; } label { position: relative; padding-left: 40px; font-size: 18px; line-height: 32px; cursor: pointer; } label:before, label:after { /* You *have* imported Fontawesome in your html doc, right? */ font-family: FontAwesome; font-size: 24px; position: absolute; top: 0; left: 0; padding: 1px; } /*unchecked*/ .checkbox+label:before { content: "\f096"; color: #333; } .checkbox+label:after { content: "\f00c"; margin: -3px 0 0; max-width: 0; overflow: hidden; opacity: 0.5; /* CSS3 transitions for animated effect for browsers that support it */ transition: all 0.3s ease-in-out; } .radio+label:before { content: "\f10c"; color: #333; } .radio+label:after { content: "\f111"; margin: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease-in-out; } input[type="checkbox"]:checked + label:after { max-width: 40px; opacity: 1; color: #0c0; } input[type="radio"]:checked + label:after { max-width: 40px; opacity: 1; color: #000; } input[type="radio"]:checked + label:before { opacity: 0; } .toggle .radio+label:before { content: "\f204"; color: #333; } .toggle .radio+label:after { content: "\f205"; rotate: ; margin: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease-in-out; }

Related: See More


Questions / Comments: