Highlight a SELECT drop-down list onFocus

[jgannaway]

Here's my code:

<select id="fruit" name="fruit" onfocus="this.style.backgroundColor='rgb(255,253,216)';" onblur="this.style.backgroundColor='';">
<option>apple</option>
<option>orange</option>
</select>

When a user clicks on the Drop Down List, here are the results:
In Mozilla: The box highlights in yellow (background color) AND the option list that displays also has a yellow highlight.

In IE: The box highlights in yellow, BUT the option list does not! The option list has a white background color UNTIL the user mouses over the option -- THEN it turns yellow.

How can I get this work in IE like it does in Mozilla?

Thanks!
-Jeff

"Grace... She travels outside of Karma"
-U2

 

[BabyJeffy]

What have you tried so far?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[steven290]

this works in IE except that you need to move your mouse on the options (its onfocus of options)

 

[cLFlaVA]

i would try something like this:

function doChange(s) {
    s.style.backgroundColor = (s.style.backgroundColor=='red')?'':'red';
}

<select name="s" onfocus="doChange(this);" onblur="doChange(this);">

*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]