I need to style a <select> form as much as humanly possible without any javascript intervention. What are the properties I can use to do so?

This code needs to be compatible with all major browsers. Also, does anyone know how to disable the mac "default" form look so I can design mine from within the browser?

2 answers


You would probably be better off simulating the select some other way, rather than trying to CSS style a select form control.

Here's a support grid, that makes it clear you're doomed to fail with CSS: http://www.electrictoolbox.com/style-select-optgroup-options-css/

Try the jQuery option: http://wellstyled.com/en/javascript-styleselect-jquery-plugin/

Answered over 9 years ago by Tony Crockford

Tony Crockford's link points to jQuery which is Javascript, which Adrian specifically asked not to use.

In addition to the second link Tony points to: http://www.456bereastreet.com/lab/form_controls/select/ full of examples of how to style a dropdown.

Unfortunately the default Mac OSX styling of form elements in webpages can't be "turned off" by styles, the only alternative is to use Javascript to make new form elements. But: I suggest you don't do that, people using Macs are used to their forms looking a certain way, you might confuse them if you make your own styled elements. Same goes for other platforms by the way. As Steve Krug writes in his book: "Don't make your users think."

Answered over 9 years ago by Niels Bom