Bootstrap Snippet Badgebox: CSS checkbox badge using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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">
        <div class="btn-group">
          
          <button class="btn btn-default" type="button">Печать</button>
          <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
              <li><a href="#">Всё</a></li>
              <li class="divider"></li>
              <li><a href="#">Документ 1</a></li>
              <li><a href="#">Документ 2</a></li>
          </ul>
      </div>
    </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
/* 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;
}
.btn-labeled {padding-right: 10}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
// You didn't believe it hadn't used JS, uh?
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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