/    Sign up×
Community /Pin to ProfileBookmark

How to change ‘selected option’ color on select box?

Copy linkTweet thisAlerts:
Mar 23.2004

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

[code=php]
<select name=”colours”>
<option value=”cifBlue” style=”background-color:#330099;color:#FFFFFF”>
CIF Default</option>
<option value=”Red” style=”background-color:Red;”></option>
</select>
[/code]

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??

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@BonnerMar 23.2004 — 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.
Copy linkTweet thisAlerts:
@Paul_JrMar 23.2004 — [i]Originally posted by Bonner [/i]

[B]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. [/B][/QUOTE]
None of that will work. You need to use JS 100% if you want to style the individual options themselves.
Copy linkTweet thisAlerts:
@ray326Mar 24.2004 — See my reply to your other post on this topic.
Copy linkTweet thisAlerts:
@BonnerMar 24.2004 — [i]Originally posted by Paul Jr [/i]

[B]None of that will work. You need to use JS 100% if you want to style the individual options themselves. [/B][/QUOTE]

You have been proven wrong my son.
Copy linkTweet thisAlerts:
@Paul_JrMar 24.2004 — [i]Originally posted by Bonner [/i]

[B]You have been proven wrong my son. [/B][/QUOTE]
True dat, G, true dat. ?

I had no idea you could use [FONT=courier new]<optgroup>[/FONT] 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?
Copy linkTweet thisAlerts:
@ray326Mar 24.2004 — I'd try putting an id on it.
Copy linkTweet thisAlerts:
@BonnerMar 24.2004 — From my experience id's are not liked by IE too, you have to use class instead and then IE starts to listen.
×

Success!

Help @jovialjonny spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...