Ajax Loader
HTML
<div class="_radio">
1
<div class="_radio">
2
  <input type="radio" name="id" id="id_0" value="x">
3
  <label for="id_0"><mark></mark> It’s awesome - where would I be without it</label>
4
</div>
5
<div class="_radio">
6
  <input type="radio" name="id" id="id_1" value="y">
7
  <label for="id_1"><mark></mark> No</label>
8
</div>
9
<div class="_radio">
10
  <input type="radio" name="id" id="id_2" value="z">
11
  <label for="id_2"><mark></mark> Maybe</label>
12
</div>
13
 
14
<div class="_checkbox">
15
  <input type="checkbox" name="like" id="like" value="like" checked>
16
  <label for="like"><mark></mark> Yes</label>
17
</div>
18
 
 
CSS
._radio { padding:5px; margin-left:40px; }
1
._radio { padding:5px; margin-left:40px; }
2
._radio input[type="radio"] { opacity: 0; position: absolute; }
3
._radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
4
._radio input[type="radio"]:checked + label > mark:before { content:' '; background:#009df5; width:10px; height:10px; display:inline-block; margin:10px; border-radius:5px;}
5
._radio input[type="radio"] + label > mark { display:inline-block; width:30px; height:30px; vertical-align:middle; border-radius:15px; border:1px solid #ccc; background:#fff; text-indent: 0; }
6
 
7
 
8
 
9
._checkbox { padding:5px; margin-left:40px; }
10
._checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
11
._checkbox input[type="checkbox"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
12
._checkbox input[type="checkbox"] + label > mark { position:relative; display:inline-block; width:30px; height:30px; vertical-align:middle; border-radius:5px; border:1px solid #ccc; background:#fff; text-indent: 0; }
13
._checkbox input[type="checkbox"]:checked + label > mark:before { content:' '; background:#009df5; width:3px; height:3px; position:absolute; top:13px; left:11px; transform: rotate(45deg); -webkit-transform: rotate(45deg);  }
14
._checkbox input[type="checkbox"]:checked + label > mark:after { content:' '; background:#009df5; width:3px; height:9px; position:absolute; top:10px; left:15px; transform: rotate(45deg); -webkit-transform: rotate(45deg);  }
15
 
16
 
17
 
18
 
 

CSS Radio and Checkbox

CSSDeck G+