Ajax Loader
×

Decorative checkboxes

Impressed by http://www.paulund.co.uk/style-checkboxes-with-css I decided to create my own checkboxes followed by Paul Underwood. First works.

HTML
<section style="margin-top: 50px;">
1
<section style="margin-top: 50px;">
2
  <header style="margin-bottom: 30px;">My checkboxes</header>
3
  <div class="checkbox">
4
    <input type="checkbox" id="checkbox"/>
5
    <label for="checkbox"></label>
6
  </div>
7
</section>
 
CSS
input[type="checkbox"]{
1
input[type="checkbox"]{
2
  display: none;
3
}
4
.checkbox{
5
  position: relative;
6
  width: 60px;
7
  height: 19px;
8
  background-color: green;
9
  border-radius: 10px;
10
}
11
 
12
.checkbox input[type="checkbox"] + label{
13
  left: 0%;
14
  top: 0px;
15
  cursor: pointer;
16
  position: absolute; /*otherwise ,,left: x px;" isn't working*/
17
  display: block;
18
  width: 30px;
19
  height: 19px;
20
  border-radius: 100%;
21
  background-color: red;
22
  box-shadow: 0px 0px 3px 2px red;
23
  
24
  -webkit-transition: all .5s ease;
25
  -moz-transition: all .5s ease;
26
  -o-transition: all .5s ease;
27
  -ms-transition: all .5s ease;
28
  transition: all .5s ease;
29
}
30
 
31
.checkbox input[type="checkbox"]:checked + label{
32
  left: 50%;
33
  z-index: 1;
34
  background-color: blue;
35
  box-shadow: 0px 0px 3px 2px green;
36
}
37
.checkbox input[type="checkbox"]:checked + label:before{
38
  content: "\2714";
39
  position: absolute;
40
  left: 8px;
41
  color: white;
42
}
43
 
44
.checkbox input[type="checkbox"] + label:before{
45
  content: "\2718";
46
  position: absolute;
47
  left: 8px;
48
  color: white;
49
}
50
 
51
.checkbox:before{
52
  position: absolute;
53
  left: 5px;
54
  content: "Yes";
55
  color: white;
56
  font-family: serif;
57
}
58
 
59
.checkbox:after{
60
  position: absolute;
61
  left: 35px;
62
  content: "No";
63
  color: white;
64
  font-family: serif;
65
}
 

Decorative checkboxes

CSSDeck G+