Fun with CSS
By NoMoreNicksLeft (Mon Mar 06, 2006 at 09:07:09 PM EST) css, html, xhtml, web design, stylesheets (all tags)
So, I've got a page that needs a few checkboxes. And I've got only so much space to fit them into. There aren't many options left... the labels are as abbreviated as they reasonably can be. They can't be sized any smaller, not without people squinting. And other widget/gui approaches are even uglier.

What I really need, is to pick up 20 or 30 pixels worth of horizontal space. The checkboxes themselves have to go.

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?

Fun with CSS | 6 comments (6 topical, 0 hidden) | Trackback
really, what you should do by martingale (4.00 / 2) #1 Mon Mar 06, 2006 at 11:00:31 PM EST
is write an ActiveX plugin which downloads automatically when the web page is first loaded, and then replaces the IE system DLL with a shim that replaces the checkbox drawing primitives with custom drawable controls which happen to look like checkboxes that are 20% thinner. Then you don't have to bother with all that complicated CSS and javascript stuff. It's what Rogerborg would do. Moreover, it's what Windows was designed for.
--
$E(X_t|F_s) = X_s,\quad t > s$
I'm not supporting IE. by NoMoreNicksLeft (4.00 / 1) #2 Mon Mar 06, 2006 at 11:04:05 PM EST
People that want to use my website should install a web browser, and stop using operating system components.
--
Do not look directly into laser with remaining good eye.
[ Parent ]
OScist! [n/t] by martingale (2.00 / 0) #3 Mon Mar 06, 2006 at 11:13:03 PM EST

--
$E(X_t|F_s) = X_s,\quad t > s$
[ Parent ]
No. by NoMoreNicksLeft (2.00 / 0) #4 Mon Mar 06, 2006 at 11:27:26 PM EST
It is not an OS. It's malware.
--
Do not look directly into laser with remaining good eye.
[ Parent ]
Doesn't work... by finn (2.00 / 0) #5 Tue Mar 07, 2006 at 02:45:04 AM EST

Doesn't work in Konqueror 3.5.1 on Suse 10.0 OSS.

Clicking the label for checkbox e (the visible one) selects the checkbox, but doesn't change the background image.

Thanks. by NoMoreNicksLeft (2.00 / 0) #6 Tue Mar 07, 2006 at 02:10:11 PM EST
I keep hoping Konqueror 4 comes out, maybe this will work. Have to wait for it for SVG to work anyway.
--
Do not look directly into laser with remaining good eye.
[ Parent ]
Fun with CSS | 6 comments (6 topical, 0 hidden) | Trackback