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.
Currently CSS does not support this feature.
You can build your own or use a plug-in that emulates this behaviour using DIVs/CSS.
A crude way to do it -
var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
var options = this.children;
for(var i=0; i < this.childElementCount; i++){
options[i].style.color = 'white';
}
var selected = this.children[this.selectedIndex];
selected.style.color = 'red';
}, false);
You cannot rely on CSS for form elements. The results vary wildly across all the browsers. I don't think Safari lets you customize any form elements at all.
Your best bet is to use a plugin like jqTransform (uses jQuery).
EDIT: that page doesn't seem to be working at the moment. There is also Custom Form Elements which supports MooTools and may support jQuery in the future.