"check box & Radio buttons"
Bootstrap 3.3.0 Snippet by jeevan123456

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
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 & Radio ============================ */
[type="checkbox"] + label {
padding-left: 26px;
height: 25px;
line-height: 21px;
font-size: 13px;
font-weight: normal; }
[type="checkbox"]:checked + label:before {
top: -4px;
left: -2px;
width: 11px;
height: 19px; }
[type="checkbox"]:checked.chk-col-red + label:before {
border-right: 2px solid #F44336;
border-bottom: 2px solid #F44336; }
[type="checkbox"]:checked.chk-col-pink + label:before {
border-right: 2px solid #E91E63;
border-bottom: 2px solid #E91E63; }
[type="checkbox"]:checked.chk-col-purple + label:before {
border-right: 2px solid #9C27B0;
border-bottom: 2px solid #9C27B0; }
[type="checkbox"]:checked.chk-col-deep-purple + label:before {
border-right: 2px solid #673AB7;
border-bottom: 2px solid #673AB7; }
[type="checkbox"]:checked.chk-col-indigo + label:before {
border-right: 2px solid #3F51B5;
border-bottom: 2px solid #3F51B5; }
[type="checkbox"]:checked.chk-col-blue + label:before {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
Animated Radio tab
Funky Radio/Checkbox Buttons V2.0

Questions / Comments: