Now, there are several things working in my favor. Both Opera and Firefox support the :checked selector. That is, a checkbox (or with the + modifier, its next immediate sibling) can be styled depending on whether it is checked or not. Also, clicking on a label in both can toggle the checkbox. So, the checkbox can be hidden completely, and we can have the label be styled differently based on whether or not the checkbox associated with it is checked.
You could change the font style or color, but I elected to play with the background-image property. Check out the (SFW) example.
Note: This method should be semantically correct, and should degrade gracefully if stylesheets are forced off. It is 100% CSS, no javascript. Of course, IE doesn't like it. That's to be expected. If anyone could check it out and let me know what it looks like on your platform/browser, I would appreciate it.
It's not quite what I had in mind. The graphics aren't quite what I had hoped (whipped up in Inkscape in just a few minutes each). They need to be light enough that they don't interfere with label legibility. But bright enough that they are recognizable. (Supposed to be a blue checkmark, and a gray X mark).
Also, do I want marks for both yes and no? Or only one or the other? With an actual checkbox, the X mark means "yes", and the absence means "no". But in other contexts, an X can denote the negative. Anyone have any ideas on what is more obvious, to those who will be seeing my page for the first time?
< Picture Diary: Our Attic | BBC White season: 'Rivers of Blood' > |