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

HTML Select option selected color style

P: n/a
Is there a style for a select option's "selected" color? For example:

<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="background-color:red;">
<OPTION>Test 1
<OPTION>Test 2
<OPTION>Test 3
<OPTION>Test 4
<OPTION>Test 5
<OPTION>Test 6
<OPTION>Test 7
</SELECT>
</FORM>
</BODY>
</HTML>

When I select an option it turns blue, I want to override this and
make it a different color. In the style I expected something like
"selected-color", but it doesn't exist. I've also tried using
javascript to change the background color (works if I click on a
different option using the onClick event
mySelect.option[2].style.backgroundColor="green"), but something seems
to be overriding it if I click on the option I want to change). Here's
the code for that option that I've been playing with:

<HTML>
<HEAD>
<TITLE>

</TITLE>
<SCRIPT>
function init() {
document.formName.selectName.options[5].style.backgroundColor
='green';
document.formName.selectName.options[5].style.color ='red';
document.formName.selectName.options[5].style.foregroundColor
='orange';
document.formName.selectName.options[5].style.bgColor ='red';
}
function test(tst) {
alert(tst);
document.formName.selectName.options[5].style.backgroundColor
='black';
document.formName.selectName.options[5].style.color ='black';
document.formName.selectName.options[5].style.foregroundColor
='black';
document.formName.selectName.options[5].style.bgColor ='black';
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<FORM NAME="formName">
<SELECT NAME="selectName" style="background-color:red" SIZE="7"
onclick="window.event.cancelBubble='true';test('on click')">
<OPTION>TEST 1
<OPTION>TEST 2
<OPTION>TEST 3
<OPTION>TEST 4
<OPTION>TEST 5
<OPTION>TEST 6
<OPTION>TEST 7
</SELECT>
</FORM>
</BODY>
</HTML>

Any ideas appreciated!

Thanks!
Jeff
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
jc********@statestreetkc.com (Jeff Anderson) wrote:
Is there a style for a select option's "selected" color?


You could try option:focus {} but I doubt you'd have much luck and it
certainly wouldn't work in IE.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Steve Pugh <st***@pugh.net> wrote:
jc********@statestreetkc.com (Jeff Anderson) wrote:
Is there a style for a select option's "selected" color?


You could try option:focus {} but I doubt you'd have much luck and it
certainly wouldn't work in IE.


I should have added that CSS3 has the :checked pseudo-class will be
the proper way of doing this. At least I think so, it may or may not
apply here (the examples given are of radio buttons and checkboxes;
but the mention of the HTML selected attribute can be taken as
including option elements, as they're the only element that attribute
exists for).

However, I know of no browser that supports this part of CSS3 yet.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
Steve Pugh <st***@pugh.net> wrote:
Is there a style for a select option's "selected" color?


You could try option:focus {} but I doubt you'd have much luck and it
certainly wouldn't work in IE.


The :focus pseudo-class is confusingly defined in the specification and
inconsistently implemented in vrowsers. But I think it is certainly not
meant to be identical with the concept of 'selected option' when used
for an option element. When you have selected an option from a
select menu and then move to another field, by tabbing or clicking for
example, then surely the focus moves away from the select or option
element, if it was there.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #4

P: n/a
Steve Pugh wrote:
However, I know of no browser that supports this part of CSS3 yet.


Mozilla: <http://bugzilla.mozilla.org/show_bug.cgi?id=120834>
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.