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?

I use border, padding, and width, and the end result looks great.

The only thing that bothers me is the part that drops down. Is there any control over this? (It looks dumb to have padding and on the drop down list have none).

Answer 1

There is no cross-browser way to style the drop down. Have a look at these alternatives:

• Drop Down using CSS and jQuery
• jQuery plugin: Stylish Select Box

Answer 2

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/