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 almost 10 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 almost 10 years ago by Niels Bom