"Checkbox/Radio - CSS Only"
Bootstrap 3.2.0 Snippet by tonetlds

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">
<h1 class="text-center">Checkbox/Radio - CSS Only</h1>
</div>
<div class="container">
<div class="well well-sm text-center">
<h3>Checkbox</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="checkbox" autocomplete="off" checked>
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Pham Tan Thanh () - 7 years ago - Reply 0


It doesn't work for me, After uncheck, it goes to bg-primary class... I needo something else than bootstrap and jQuery?

Rola Aguilera Salazar () - 7 years ago - Reply 0


Hi there, thanks for the share. It looks great.

Is there a way I can have the tick be a minus before it's ticked? ie. glyphicon be glyphicon-minus until active, then go to the glyphicon-ok?

Scott Crawford () - 7 years ago - Reply 0


Hi, I added this to my form. And it all seemed to work fine, but unfortunatly it does not work completely as I want it. When clicked the glypicon does not disapear. It seems that the opacity 0 in css is not recognized in any browser. I would like to add the code but I don't think I can paste it in this field?

Mike

Mike () - 8 years ago - Reply 0


How do you show checkbox as disabled and not allow clicking on it?

Toto Kotunjo () - 8 years ago - Reply 0


hi. can i ask a question? how can i checkbox size down?

Lee Geun-Yeol (MyHealingLife) () - 8 years ago - Reply 0


since we're using bootstrap .btn classes -- .btn-sm and .btn-xs will make them smaller. example: <label class="btn btn-xs btn-success">...</label>

hellotecho () - 8 years ago - Reply 0


When I submit the form using this and I encounter some validation error, it does not repopulate the selected radio visually, how do I fix this?

John Mark Acuesta () - 8 years ago - Reply 0


Awesome perfect for my project. Thanks Man!

Josh () - 9 years ago - Reply 0


how can i use some thing from the glyphicon-s without giiting thim hide

omar sabbah () - 10 years ago - Reply 0


omar, not exactly sure, but i think you are asking how make glyphicons on the unselected items visible? -- if so, in the css, change to opacity of span.glyphicon to something that is visible. example: .btn span.glyphicon { opacity: 0.5;} then the unselected buttons will show your glyphicons slightly faded.

hellotecho () - 10 years ago - Reply 0