Is there a style for a select option's "selected" color? For example:
<HTML>
<BODY>
<FORM NAME="form1">
<SELECT NAME="mySelect" SIZE="7" style="backgrou nd-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.backgrou ndColor="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.formNa me.selectName.o ptions[5].style.backgrou ndColor
='green';
document.formNa me.selectName.o ptions[5].style.color ='red';
document.formNa me.selectName.o ptions[5].style.foregrou ndColor
='orange';
document.formNa me.selectName.o ptions[5].style.bgColor ='red';
}
function test(tst) {
alert(tst);
document.formNa me.selectName.o ptions[5].style.backgrou ndColor
='black';
document.formNa me.selectName.o ptions[5].style.color ='black';
document.formNa me.selectName.o ptions[5].style.foregrou ndColor
='black';
document.formNa me.selectName.o ptions[5].style.bgColor ='black';
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init(); ">
<FORM NAME="formName" >
<SELECT NAME="selectNam e" style="backgrou nd-color:red" SIZE="7"
onclick="window .event.cancelBu bble='true';tes t('onclick')">
<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