views:

113

answers:

2

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'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</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 "CCS 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.

A: 

There is a jQuery plugin called Uniform which does a very nice job of this.

Matt Sherman
sadly we're using prototype and I can't change that (the knock on effects would be crippling). I'd look for a prototype plugin (fancy forms) ... but part of my "personal" goal is to get it to work using the non-js method. I know it can be done (see tutorial) I *feel* like I'm close... and I think that knowing how to do it would improve my ability to work with future, similar tasks. Obviously, if it's square-peg-round-hole impossible I'll give up and move to a JS trick of some kind.
Alex C
+1  A: 

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

arbales
:D ha ha! fantastic! Just perfect!
Alex C
glad it worked for you
arbales