By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,016 Members | 2,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,016 IT Pros & Developers. It's quick & easy.

Changing the hover characteristics of select

100+
P: 290
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
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
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

100+
P: 290
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

acoder
Expert Mod 15k+
P: 16,027
I see - you want to make it bold. Then set the fontWeight property.
Jan 28 '09 #4

100+
P: 290
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.
Jan 28 '09 #5

acoder
Expert Mod 15k+
P: 16,027
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.