How to change 'selected option' color on select box?

liunx

Guest
Hi,
I have a normal select box with a few options like so:

<select name="colours">
<option value="cifBlue" style="background-color:#330099;color:#FFFFFF">
CIF Default</option>
<option value="Red" style="background-color:Red;"></option>
</select>


I am using the drop down box as a color selector, i.e. each option has a different background color. The problem is when they select an option it appears as the default highlighted color, which is a dark blue.

Is there any way I can change the color of this highlighted option or just disable the highlighting altogether??option:hover {
background-colour : #000000;
color : #ffffff;
}

if you want each to have its own idividual colour you need to give each an id (example: option value="cifBlue" id="cifBlue") and then add indivual styles to a stylesheet (example:
#cifBlue:hover {
background-colour : #000000;
color : #ffffff;
}
) and if you want this to work for Internet Explorer you require a bit of Javascript which you can embed in your CSS as a behaviour.Originally posted by Bonner
option:hover {
background-colour : #000000;
color : #ffffff;
}

if you want each to have its own idividual colour you need to give each an id (example: option value="cifBlue" id="cifBlue") and then add indivual styles to a stylesheet (example:
#cifBlue:hover {
background-colour : #000000;
color : #ffffff;
}
) and if you want this to work for Internet Explorer you require a bit of Javascript which you can embed in your CSS as a behaviour.
None of that will work. You need to use JS 100% if you want to style the individual options themselves.See my reply to your other post on this topic.Originally posted by Paul Jr
None of that will work. You need to use JS 100% if you want to style the individual options themselves.

You have been proven wrong my son.Originally posted by Bonner
You have been proven wrong my son.
True dat, G, true dat. :D
I had no idea you could use <optgroup> to style the options. Though it won't work in IE -- crummy excuse for a browser! :mad:

But, I still think you need JS to style individual options. What if you only want one styled?I'd try putting an id on it.From my experience id's are not liked by IE too, you have to use class instead and then IE starts to listen.
 
Back
Top