471,851 Members | 979 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,851 software developers and data experts.

Changing the hover characteristics of select

290 100+
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:
Expand|Select|Wrap|Line Numbers
  1. <span class="select">Color: 
  2.  <select name="x_color" onChange="wrapText(document.getElementById('TheTextArea'),'[col='+this.value+']','[/col]');">
  3.  <option style = "background-color: black; color: white;" value = 'black' selected= "selected" onMouseOver="background-color: black;">black &nbsp;&nbsp;</option>
  4.  <option style = "background-color: blue;color: white;" value = 'blue' onMouseOver="background-color: blue;" >blue &nbsp;&nbsp;</option>
  5.  <option style = "background-color: red;" value = 'red' onMouseOver="background-color: red;">red &nbsp;&nbsp;</option>
  6.  <option style = "background-color: green;" value = 'green' onMouseOver="background-color: green;">green &nbsp;&nbsp;</option>
  7.  <option style = "background-color: yellow;" value = 'yellow' onMouseOver="background-color: yellow;">yellow &nbsp;&nbsp;</option>
  8.  <option style = "background-color: gray;" value = 'gray' onMouseOver="background-color: gray;">grey &nbsp;&nbsp;</option>
  9.  <option style = "background-color: white" value = 'white' onMouseOver="background-color: white;">white &nbsp;&nbsp;</option>
  10.  <option style = "background-color: brown;color: white;" value = 'brown' onMouseOver="background-color: brown;">brown &nbsp;&nbsp;</option>
  11.  <option style = "background-color: orange;" value = 'orange' onMouseOver="background-color: orange;">orange &nbsp;&nbsp;</option>
  12. </select>
  13. </span>
Does anyone know why this doesn't work and how I can fix it ?
Jan 28 '09 #1
5 5065
16,027 Expert Mod 8TB
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.
Expand|Select|Wrap|Line Numbers
  1. <option ... onmouseover="this.style.backgroundColor='green'">
Jan 28 '09 #2
290 100+
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 ?
Jan 28 '09 #3
16,027 Expert Mod 8TB
I see - you want to make it bold. Then set the fontWeight property.
Jan 28 '09 #4
290 100+
The bold is no problem,
it is the keeping the background color stable that doesn't

Looks like its a built in property of the select entity.
Jan 28 '09 #5
16,027 Expert Mod 8TB
Yes, that's correct. If you want complete control, you'll need to create your own using DHTML.
Jan 29 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Boyd Reilly | last post: by
7 posts views Thread by squidco | last post: by
3 posts views Thread by Michael Eisenstadt | last post: by
12 posts views Thread by Nico Schuyt | last post: by
5 posts views Thread by Gerry Vandermaesen | last post: by
11 posts views Thread by Toby | last post: by
reply views Thread by NeoPa | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.