HTML selected option background-color CSS style

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);

Leave a Comment