Here's what I've done in the past. Make sure to change the URL path to your actual image in the CSS...
Add this into your <head>
<style type="text/css">
input[type="checkbox"] { /* turns off display of the checkbox */
display:none;
}
label { /* turns labels into a block element and styles it */
display:block;
background-image:url(path/to/your-image.jpg);
background-repeat:no-repeat;
background-position:0px -27px;
width:83px;
height:27px;
}
input[type="checkbox"]:checked + label { /* gives a new style to the label of a checked checkbox */
background-position:0px 0px;
}
Then add this to your body...
<input type="checkbox" id="check1" value="value1">
<label for="check1"></label>
<input type="checkbox" id="check2" value="value2" >
<label for="check2"></label>
<input type="checkbox" id="check3" value="value3" >
<label for="check3"></label>
<input type="checkbox" id="check4" value="value4" >
<label for="check4"></label>
</style>
Note the checkbox ids and "label for" indentifiers. They need to be the same for each pair.
, I'm sensitive.
