Can I change the border color / style of a SELECT element using CSS in IE 8?

Question

I have seen that the situation is very problematic after reading these:

http://stackoverflow.com/questions/380037/ie6-ie7-css-border-on-select-element http://api.jquery.com/css/

However maybe the situation has changed with Internet Explorer 8. If that is so, I'd expect this piece of code to work in IE8:

 $(selectObject).css("border", "1px solid red");
 $(selectObject).css("border-style", "dashed");

This works as I expect in Firefox but not in Internet Explorer 8. (Nothing changes in IE 8). So either I'm forgetting something or IE8 is still broken (in the sense given by the context above).

If I'm forgetting something for IE8 then what is it?

If IE8 is definitely broken and cannot use CSS to change the properties of SELECT elements then do you have any authoritative source that explains this situation? (Along with possible work arounds?)

Answer 1

http://stackoverflow.com/questions/1880460/ie8-and-border-css-property-on-select-menus

Answer 2

What you have worked in IE8, you can view a test here: http://jsfiddle.net/G7ThX/

Are you sure your page isn't in quirks mode?

As for alternative options, there are jQuery routes for replacing the rendered <select> all-together for UI purposes, like Stylish Select Box (latest code here), these are a bit more style-able, and maybe a better route if you want to do more than a border and render the same cross-browser.

Most of these plugins work by hiding the <select> and using its options, but still setting its value in the background...the form knows no difference in posted values, so it's easy to drop in.