CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer
Tim Büthe
Tim Büthe

Reputation: 63744

Why does select with onfocus not work in IE?

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?

Upvotes: 2

Views: 10362

Answers (6)

thetoolman
thetoolman

Reputation: 2164

Here is my example of this bug for ie8:

http://jsfiddle.net/axQTJ/1/

Upvotes: 0

hippyneil
hippyneil

Reputation: 1

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.

Upvotes: 0

bobince
bobince

Reputation: 536389

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]-->

Upvotes: 6

Francisco Aquino
Francisco Aquino

Reputation: 9117

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>

Upvotes: 0

Marco
Marco

Reputation: 2338

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. :)

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328604

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.

Upvotes: -1

Related Questions