Revert <select> drop down style/"arrow" after changing css in Internet Explorer

Question

I recently noticed whenever I modify the css of a select element it changes the drop down arrow. In IE 11 it goes from a simple down arrow with a white background to a simple arrow with a gray background.

You can see a very simple example with this jsFiddle: http://jsfiddle.net/99gPQ/

Normal Select: 
<select>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br />
CSS Select:&nbsp;
<select style="background-color: lightcoral;">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Often when error checking a form prior to submission I'll highlight errors with a colored background then when the user fixes the error I'll revert the background. I can't seem to find out to do the following: 1) make the changed background color go behind the down arrow and 2) when I revert back to a white background go back to the original visual style not the modified one with a gray background behind the arrow.

Any help would be greatly appreciated.

-CA

Answer 1

You can style drop down arrow using this IE-specific selector:

select::-ms-expand {
    /* your styles */
}

Works only in IE10, IE11.

JsFiddle demo