HTML Select option selected color style

#1 July 20th, 2005, 10:29 PM

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

#2 July 20th, 2005, 10:29 PM

jcanderson@statestreetkc.com (Jeff Anderson) wrote:
[color=blue]
>Is there a style for a select option's "selected" color?[/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 <steve@pugh.net> <http://steve.pugh.net/>

#3 July 20th, 2005, 10:29 PM

Steve Pugh <steve@pugh.net> wrote:
[color=blue]
>jcanderson@statestreetkc.com (Jeff Anderson) wrote:
>[color=green]
>>Is there a style for a select option's "selected" color?[/color]
>
>You could try option:focus {} but I doubt you'd have much luck and it
>certainly wouldn't work in IE.[/color]

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 <steve@pugh.net> <http://steve.pugh.net/>

#4 July 20th, 2005, 10:30 PM

Steve Pugh <steve@pugh.net> wrote:
[color=blue][color=green]
>>Is there a style for a select option's "selected" color?[/color]
>
> You could try option:focus {} but I doubt you'd have much luck and it
> certainly wouldn't work in IE.[/color]

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/

#5 July 20th, 2005, 10:30 PM

Steve Pugh wrote:
[color=blue]
> However, I know of no browser that supports this part of CSS3 yet.[/color]

Mozilla: <http://bugzilla.mozilla.org/show_bug.cgi?id=120834>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

What is Bytes?

Popular Articles