HTML <select> selected option background-color CSS style
css, html, javascript
Solution
You may not be able to do this using pure CSS. But, a little javascript can do it nicely.
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);
Problem
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.