How do I style form drop down lists?

Question

I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.

Answer 1

You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.

You can then target options by using the OPTION selector.

SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }

Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.

Answer 2

Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).

When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.

Luckly there's a plugin for JQuery that allows this be a trivial task. Checkout the selectbox replacement plugin for JQuery from Brainfault: http://www.brainfault.com/jquery-plugins/jquery-selectbox-replacement/

Answer 3

As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.