background color on a select tag breaks firefox UI

here is a regular <select> box look on firefox (osx):

if i add the 开发者_如何学Pythonfollowing style to it:

form select.error {
    background-color: #FFAAAA;
}

it looks like this:

question: Is there any way to keep the pretty styling and still make it red?

The "pretty styling" is all a single background image drawn by the OS. So when you override it, Firefox has to fall back to some other kind of styling...

So no, you can't keep the original look but just change the background color.

You cannot reliably style select boxes as browsers tend to stick to the OS's defaults. Your anser is no, if you only intend on using CSS.

There are jQuery options for styling select boxes available: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/