"Animated radios & checkboxes (noJS)"
Bootstrap 3.3.0 Snippet by aahz

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="//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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h1>CheckboxRadio (no JS)</h1>
<hr/>
<p>This snippet allows you create nice animated checkboxes and radios without JavaScript. <br/>Just put <code><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></code> right after your checkbox or radio.</p>
<p>Other markup was copied from <a href="http://getbootstrap.com/css/#forms" target="_blank">Bootstrap example</a>.</p>
<h2>Checkboxes</h2>
<hr/>
<h3>Default example</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
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
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This is handy, the radio buttons were off though, adding this helped.

i.cr-icon.fa.fa-circle {

margin-left: 0.08em;

}

Robert () - 9 years ago - Reply -1


Radios are little bit harder to adjust, I agree. Fixed little bit by adding common left margin for radiobuttons but it is necessary to adjust each icon separately.

By the way this is a solution I used before for checkboxes only, adding radiobuttons was made only because the ability to use common pseudo selector =)

Andrew Ozdion () - 9 years ago - Reply 0


How to check if is checked?

avelinocneto () - 5 years ago - Reply 0


Add this to make it in line with inputs and consistent with Bootstrap default checkbox/radios.

.checkbox .cr,
.radio .cr {
...
margin-left: -20px;
}

Bogusław Wójcik () - 8 years ago - Reply 0


Well, there is missing style, when checkboxes are "inline"

Varasso () - 8 years ago - Reply 0


Setting the checkbox to checked via jQuery does not make the checkmark display, the checkbox remains empty and additional code sees the checkbox as not checked.

Connie DeCinko () - 8 years ago - Reply 0


Hi it works without any postback of the page. But when I make postback with the checkbox checked then the tick mark doesn't exist and goes back to the default checkbox list. Any help

Su Ahmed () - 8 years ago - Reply 0


can these be toggled via jquery ?

Jaxx RR () - 9 years ago - Reply 0


Hi!
How to change css for usage like this:

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that — be sure to include why it's great

</label>
</div>

Stan Ezersky () - 9 years ago - Reply 0


i copied the same from this HTML & CSS but the trick is not shown in the browser. can anyone help me , would be appreciated.

John Ramesh () - 9 years ago - Reply 0


can i used it in bootstrap 2 ?

dimas priyasmito nugroho () - 9 years ago - Reply 0


i tried but the tick is not showing, do i need to include the image?
thanks

Tony () - 9 years ago - Reply 0


The last radiobutton is a checkbox. The small Radiobutton. Just saying.

ChregiChrogi () - 9 years ago - Reply 0


Thanx, fixed =)

Andrew Ozdion () - 9 years ago - Reply 0


Клёво, что без яваскрипта.

MaximAL () - 9 years ago - Reply 0