views:

201

answers:

3

I'm looking for a sensible way how to style select boxes, checkboxes and/or radiobuttons with CSS. I know that you can't do it with plain CSS because of how browsers' rendering engines work.

But are there any javascript ways to style these HTML elements? And do they work across major browsers?

+1  A: 

You could progressively enhance a select by replacing it entirely with a label and style the label to make it look like a dropdown menu, then attach an event handler on the click and possibly keydown event to open up sibling div that contains spans which contain value attributes ( or hold the data in the js but it's easier this way ) and then attach separate click event handlers to the spans. you'll need to attach a click handler to the document and if the event object's target isnt inside of a generated dropdown, close it, and you'll probably need some other logic.

This will probably be non-accessible at first, you could try to make it more accessible by attaching keyboard event handlers but it's practical.

meder
+1  A: 

Select lists are perfectly stylable with CSS. That is, except for IE < 8, which substitutes them with OS controls.

As for checkboxes and radiobuttons, then yes, they are not really stylable with CSS. That's just the way it is, although sometimes you can set colors on them. I think it is okay to leave them as they are.

Developer Art
How are select elements PERFECTLY stylable? And it's not just IE/Windows, there are other OS's ( Mac ).
meder
+1  A: 

Dojo contains some DHTML-implemented widgets that can replace these for many pages. It degrades gracefully to the native ones when someone has JS turned off.

Kragen Javier Sitaker