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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: