There is a way to do this using just CSS. We can (ab)use the label element and style that instead. The caveat is that this will not work for IE8 and lower versions.
CSS:
.myCheckbox input { // display: none; // Better than display: none for accessibility reasons position: relative; z-index: -9999; } .myCheckbox span { width: 20px; height: 20px; display: block; background: url("link_to_image"); } .myCheckbox input:checked + span { background: url("link_to_another_image"); } HTML:
<label for="test">Label for my styled "checkbox"</label> <label class="myCheckbox"> <input type="checkbox" name="test"/> <span></span> </label>