Changing the hover characteristics of select

[jeddiki]

I want to change the default background color of my select box.

Here is the problem:
Link to form with color select

Notice in the color selector, the background color that I have given it
it the option statement changes on hover to a blue/gray.

Instead of background color change I would like the text to BOLD.
So on hovering over green, the text "green" goes green (bold) but
the background color stays green.

I have tried to do this with a onmouseover event but its not working.

Here is what I have:

<span class="select">Color: 
 <select name="x_color" onChange="wrapText(document.getElementById('TheTextArea'),'[col='+this.value+']','[/col]');">
 <option style = "background-color: black; color: white;" value = 'black' selected= "selected" onMouseOver="background-color: black;">black &nbsp;&nbsp;</option>
 <option style = "background-color: blue;color: white;" value = 'blue' onMouseOver="background-color: blue;" >blue &nbsp;&nbsp;</option>
 <option style = "background-color: red;" value = 'red' onMouseOver="background-color: red;">red &nbsp;&nbsp;</option>
 <option style = "background-color: green;" value = 'green' onMouseOver="background-color: green;">green &nbsp;&nbsp;</option>
 <option style = "background-color: yellow;" value = 'yellow' onMouseOver="background-color: yellow;">yellow &nbsp;&nbsp;</option>
 <option style = "background-color: gray;" value = 'gray' onMouseOver="background-color: gray;">grey &nbsp;&nbsp;</option>
 <option style = "background-color: white" value = 'white' onMouseOver="background-color: white;">white &nbsp;&nbsp;</option>
 <option style = "background-color: brown;color: white;" value = 'brown' onMouseOver="background-color: brown;">brown &nbsp;&nbsp;</option>
 <option style = "background-color: orange;" value = 'orange' onMouseOver="background-color: orange;">orange &nbsp;&nbsp;</option>
</select>
</span>

Does anyone know why this doesn't work and how I can fix it ?

[acoder]

You need to use the Style object of the element and set its backgroundColor property - see, for example, this link. Since you're using onmouseover inline, you can just use 'this' to refer to the element, e.g.

<option ... onmouseover="this.style.backgroundColor='green'">

[jeddiki]

Unfortuately it didn't work :(

here is a link

you can see in the source code that I tried what you suggested.

Any other ideas ?

[acoder]

I see - you want to make it bold. Then set the fontWeight property.

[jeddiki]

The bold is no problem,
it is the keeping the background color stable that doesn't
work.

Looks like its a built in property of the select entity.

[acoder]

Yes, that's correct. If you want complete control, you'll need to create your own using DHTML.