Pure CSS Checkbox Image replacement
Use this method for replacing a standard checkbox input with an image or styled box.
The markup
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>
The CSS
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: #999; //colour or image
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
background: #0080FF; //colour or image
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}