Элементы форм
Чекбоксы
Для изображения галочки используем FontAwesome.
<div class="checkbox">
<input id="ch-1" type="checkbox" value="">
<label for="ch-1">Check 1</label>
</div>
.checkbox input {display:none;}
.checkbox input + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 8px;
background-color: #aaa;
}
.checkbox input:checked + label:before {
font-family: FontAwesome;
content: "\f00c";
color: white;
background-color: #666;
text-align: center;
line-height: 20px;
}
Радио
<div class="radio">
<input name="radio" id="r-1" type="radio" value="">
<label for="r-1">Radio 1</label>
</div>
<div class="radio">
<input name="radio" id="r-2" type="radio" value="">
<label for="r-2">Radio 2</label>
</div>
.radio input {display:none;}
.radio input + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
vertical-align: middle;
margin-right: 8px;
background-color: #aaa;
}
.radio input:checked + label:before {
content: "\2022";
color:white;
background-color: #666;
font-size:1.8em;
text-align:center;
line-height:19px;
}