I want to highlight a select element with a background color to indicate, it is mandatory. When the user opens the menu by clicking on it, I want to remove the background color, so it looks nicer and is more readable. This works just fine in Firefox, Chrome and even IE6, but on IE7 & 8 the pulldown doesn't open on the first click (or is opened and closed very fast), only on the second.

<select 
    style="background-color: #BDE5F8"
    onfocus="this.style.backgroundColor='#fff'"
    onblur="this.style.backgroundColor='#BDE5F8'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

How can I fix this?

I want to highlight a select element with a background color to indicate, it is mandatory. When the user opens the menu by clicking on it, I want to remove the background color, so it looks nicer and is more readable. This works just fine in Firefox, Chrome and even IE6, but on IE7 & 8 the pulldown doesn't open on the first click (or is opened and closed very fast), only on the second.

<select 
    style="background-color: #BDE5F8"
    onfocus="this.style.backgroundColor='#fff'"
    onblur="this.style.backgroundColor='#BDE5F8'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

How can I fix this?

• javascript
• html
• css
• internet-explorer

• 1 After a little bit of testing, it appears to me that IE doesn't open the dropdown if the style is modified in any way. I even tried changing the className of a parent element, to change the background color, but that yeilded the same result. Maybe the <select> gets redrawn when it's style changes? – Marco Commented Nov 19, 2009 at 13:21

6 Answers 6

After a little bit of testing, it appears to me that IE doesn't open the dropdown if the style is modified in any way.

Yeah, good bug catch there. Anything that changes the select box (including any style change, even one triggered by changing a parent className) makes IE recreate the OS widget for it, which has the side-effect of closing it. So the dropdown is opened, but immediately closed before rendering. If you put a timeout on the background change function you can see it happen afterwards.

What you would need would be an event first just before focusing, so you can change the style, causing the dropdown to close, before it opens. Luckily, there is one! But it's IE-only. For other browsers (including IE8), best stick to the simple CSS :focus selector:

<style>
    select { background-color: #BDE5F8; }
    select:focus, select.focus { background-color: white; }
</style>
<select>
        <option>choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

<!--[if lt IE 8]><script>
    // Fix lack of :focus selector for select elements in IE7-
    //
    var selects= document.getElementsByTagName('select');
    for (var i= selects.length; i-- >0;) {
        var select= selects[i];
        select.onfocusin= function() {
            this.className= 'focus';
        };
        select.onfocusout= function() {
            this.className= '';
        };
    }

    // Or, the same expressed in jQuery, since you mentioned using it
    //
    $('select').bind('focusin', function() {
        $(this).addClass('focus');
    }).bind('focusout', function() {
        $(this).removeClass('focus');
    });
</script><![endif]-->

After testing a bit more, it seems to me that the best way would be to change the color onmouseover, and change it back on onblur, like

<select 
    onmouseover="this.style.backgroundColor='#fff';"
    onblur="this.style.backgroundColor='#bde5f7'">
    <option>choose...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Since navigating the dropdown with a keyboard doesn't show the options, it doesn't seem that important that the event has to be an onfocus event.

It appears the onmouseout event gets triggers as soon as you are no longer over the actual <select>, but maybe this can be solved with some jQuery eventhandling?

Otherwise, I have no idea. :)

Seems like a very odd bug indeed. It apparently lies on setting any different setting during the focus, for example, a class to the select.

One idea would be to only set a 'required' background color on the Choose... option as a workaround (that doesn't work on other browsers, do a browser check for this one).

<select>
        <option style="background: red none">choose...</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>

I've spent quite a while trying to resolve this issue and found a simple work-around for IE8 - just use onmousedown rather than onfocus. While this may not be absolutely ideal in all situations it does work well for style changes.

Here is my example of this bug for ie8:

http://jsfiddle/axQTJ/1/

Try onfocus="this.style.backgroundColor='#fff';return true;"

The return true; means that the original event handling code should continue. Also try whether you can achieve the same result with CSS.