Ajax Loader
HTML 
<div class="window">
1
<div class="window">
2
  <h2>CSS3 checkboxes, yo.</h2>
3
 
4
  <fieldset>
5
    <legend>Want to sign up for our annoying daily newsletter? <strong><em>DO IT!</em></strong></legend>
6
    <div class="checkItem">
7
      <input type="checkbox" value="None" id="checkboxOne" name="check" />
8
      <label for="checkboxOne" class="checkbox">Yes, sounds great</label>
9
    </div>
10
 
11
    <div class="checkItem">
12
      <input type="checkbox" value="None" id="checkboxTwo" name="check" />
13
      <label for="checkboxTwo" class="checkbox">No way, José</label>
14
    </div>
15
 
16
    <div class="checkItem">
17
      <input type="checkbox" value="None" id="checkboxThree" name="check" />
18
      <label for="checkboxThree" class="checkbox">Errrr, let me get back to you</label>
19
    </div>
20
21
    <div class="checkItem">
22
      <input type="checkbox" value="None" id="checkboxFour" name="check" />
23
      <label for="checkboxFour" class="checkbox">Whatchu talkin 'bout, Willis?</label>
24
    </div>
25
  </fieldset>
26
</div>
27
 
28
<p>Hooray! Yay for CSS3!<br /><br />Hopefully, you will find this useful. I know <em>I</em> did!</p>
 
CSS 
/* (just for presentation) */
1
/* (just for presentation) */
2
body {font-family: open sans, helvetica, arial, sans-serif; font-weight: 100; color: #e5e5e5; margin: 0; background: #eee}
3
.window {margin-top: 0em; background: #94babd; padding: 2em 3em 4em 2em; border-top: #6E898B 16px solid; border-bottom: #d0d0d0 16px solid;}
4
h2, p {color: #444; margin-bottom: 2em}
5
p {margin: 1em}
6
fieldset {border: none}
7
div.checkItem {clear: both; margin: 2em 0}
8
 
9
/*_________________________*/
10
 
11
input[type=checkbox] {
12
  visibility: hidden;/*hides default checkboxes*/
13
  margin: 0 -8px;
14
}
15
 
16
label.checkbox {
17
  cursor: pointer;
18
  text-indent: 3em;
19
  line-height: 1.5em;
20
  overflow: visible;
21
  display: inline-block;
22
  position: relative;
23
}
24
label.checkbox:before {
25
  background: #e5e5e5;
26
  content:'';
27
  position: absolute;
28
  top:0;
29
  left: 0;
30
  width: 1.6em;
31
  height: 1.6em
32
}
33
 
34
label.checkbox:after {
35
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
36
  filter: alpha(opacity=0);
37
  opacity: 0;
38
  content: '';
39
  position: absolute;
40
  width: 0.7em;
41
  height: 0.3em;
42
  background: transparent;
43
  top: 0.5em;
44
  left: 0.4em;
45
  border: 3px solid #6E898B;
46
  border-top: none;
47
  border-right: none;
48
 
49
  -webkit-transform: rotate(-45deg);
50
  -moz-transform: rotate(-45deg);
51
  -o-transform: rotate(-45deg);
52
  -ms-transform: rotate(-45deg);
53
  transform: rotate(-45deg);
54
}
55
 
56
label.checkbox:hover:after {
57
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
58
  filter: alpha(opacity=30);
59
  opacity: 0.3;
60
}
61
 
62
input[type=checkbox]:checked + label:after {
63
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
64
  filter: alpha(opacity=100);
65
  opacity: 1;
66
}
67
input[type=checkbox]:checked + label:before {
68
  background: #fff
69
}
70
 
71
input[type=checkbox]:checked + label {
72
  color: #fff
73
}
 

CSS3 Checkbox

CSSDeck G+