Ajax Loader
HTML
<div>
1
<div>
2
<input type="radio" name="radio" id="radio1" class="radio" checked/>
3
<label for="radio1">First Option</label>
4
</div>
5
 
6
<div>
7
<input type="radio" name="radio" id="radio2" class="radio"/>
8
<label for="radio2">Second Option</label>
9
</div>
10
 
11
<div> 
12
<input type="radio" name="radio" id="radio3" class="radio"/>
13
<label for="radio3">Third Option</label>
14
</div>
15
 
16
<div> 
17
<input type="radio" name="radio" id="radio4" class="radio"/>
18
<label for="radio4">Fourth Option</label>
19
</div>
 
CSS
body {
1
body {
2
  font-family: sans-serif;
3
  font-weight: normal;
4
  margin: 10px;
5
  color: #999;
6
  background-color: #eee;
7
}
8
 
9
form {
10
  margin: 40px 0;
11
}
12
 
13
div {
14
  clear: both;
15
  margin: 0 50px;
16
}
17
 
18
label {
19
  width: 200px;
20
  border-radius: 3px;
21
  border: 1px solid #D1D3D4
22
}
23
 
24
/* hide input */
25
input.radio:empty {
26
  margin-left: -999px;
27
}
28
 
29
/* style label */
30
input.radio:empty ~ label {
31
  position: relative;
32
  float: left;
33
  line-height: 2.5em;
34
  text-indent: 3.25em;
35
  margin-top: 2em;
36
  cursor: pointer;
37
  -webkit-user-select: none;
38
  -moz-user-select: none;
39
  -ms-user-select: none;
40
  user-select: none;
41
}
42
 
43
input.radio:empty ~ label:before {
44
  position: absolute;
45
  display: block;
46
  top: 0;
47
  bottom: 0;
48
  left: 0;
49
  content: '';
50
  width: 2.5em;
51
  background: #D1D3D4;
52
  border-radius: 3px 0 0 3px;
53
}
54
 
55
/* toggle hover */
56
input.radio:hover:not(:checked) ~ label:before {
57
  content:'\2714';
58
  text-indent: .9em;
59
  color: #C2C2C2;
60
}
61
 
62
input.radio:hover:not(:checked) ~ label {
63
  color: #888;
64
}
65
 
66
/* toggle on */
67
input.radio:checked ~ label:before {
68
  content:'\2714';
69
  text-indent: .9em;
70
  color: #9CE2AE;
71
  background-color: #4DCB6D;
72
}
73
 
74
input.radio:checked ~ label {
75
  color: #777;
76
}
77
 
78
/* radio focus */
79
input.radio:focus ~ label:before {
80
  box-shadow: 0 0 0 3px #999;
81
}
 

CSS Radio Buttons

CSSDeck G+