styling dropdowns (select) boxes

Question

I know it\'s possible with jquery to make something that looks like a select box so I can make it look however I want. However, with just css, how much control do I have?

Answer 1

You have some control, but there is quite a bit of variation between browsers and operating systems. For example, Internet Explorer on Windows will always show the standard grey down arrow, even though you can re-colour this in other browsers.

As for the part that drops down - these are option tags, not select; so to change them you'll be applying styles to the option tag instead:

select {
   border: 1px solid red;
}

option {
   background-color: blue;
}

Luckily some other people have done some research detailing what works and what doesn't, so here are some resources for you:

• Styling form controls in general: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• Selects specifically: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/
• Browser comparison: http://www.electrictoolbox.com/style-select-optgroup-options-css/