"Badgebox: CSS checkbox badge"
Bootstrap 3.3.0 Snippet by forsureitsme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 ---------->
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">&check;</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">&check;</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">&check;</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">&check;</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">&check;</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">&check;</span></label>
</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
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
// You didn't believe it hadn't used JS, uh?
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Clever, clever, clever!

Julio () - 7 years ago - Reply 0


how to set the checkbox checked by default?

Abdi Pranoto () - 8 years ago - Reply 0


Set the input class to "badgebox:checked"

EG () - 7 years ago - Reply 0


just amazing and ludicrously simple.
Great work! thanks for sharing

Farid E. () - 8 years ago - Reply 0


I can't use it inside a table, for example for a list of permissions of several users shown in a table. It does not work if I change the ID. Then .js is required for this. Any ideas on how I can make it work for several rows and unique IDs ??? Test this: change the id and it will not work anymore.

Патрик Жданов () - 9 years ago - Reply 0


Would you mind sharing a jsfiddle or a codepen from this? We love code!

forsureitsme () - 9 years ago - Reply 0


Nice, but when using small buttons the checked box well go down. So it's not in the middle anymore.

laurens () - 9 years ago - Reply 0


You can set it to visibility:hidden; so it doesn't appear (I guess)

forsureitsme () - 9 years ago - Reply 0


superb works thanks

oh () - 9 years ago - Reply 0