Pure CSS checkbox image replacement
I've got a checkbox list in a table. (one of a number of CB's on the row)
<tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr>
<tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr>
I'd like to replace the checkbox image with a pair of custom on/off images and I was wondering if anyone had some better understanding of how to do this with CSS?
I've found this "CSS ninja" tutorial, but I'll have to admit to finding it a bit complex for me. http://www.thecssninja.com/css/custom-inputs-using-css
As far as I can tell, you're allowed to use a pseudo class
td:not(#foo) > input[type=checkbox] + label
{
background: url('/images/off.png') 0 0px no-repeat;
height: 16px;
padding: 0 0 0 0px;
}
My expectation was that by adding the above CSS the checkbox would at least default to displaying the image in the OFF state and then I'd add the following to get the ON
td:not(#foo) > input[type=checkbox]:checked + label {
background: url('/images/on.png') 0 0px no-repeat;
}
Unfortunately, it seems I'm missing a critical step somewhere. I've tried to use the custom CSS3 selector syntax to match my current setup - but must be missing something (The images are size 16x16 if that matters)
http://www.w3.org/TR/css3-selectors/#checked
EDIT: I'd been missing something in the tutorial where he applies the image change to the label and not the input itself. I'm still not getting the expected swapped image for checkbox result on page, but think I'm closer.
Answer
You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label
Complete Code: http://gist.github.com/592332
JSFiddle: http://jsfiddle.net/4huzr/