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
