How Can I Change the Background Color of a Selected Option in an HTML `` Element?

Customizing the Background Color of the Selected Option in HTML Select

In HTML, the element enables users to choose a single option from a list of options. By default, the browser highlights the selected option with a blue background. However, developers often desire to customize this appearance further.

In the provided example, a

element with a red background is defined, but the selected option remains blue. Attempts to override this behavior using a style like "selected-color" have proven futile. This question delves into the options available to achieve the desired customization.

JavaScript Solution

Pure CSS alone may not suffice in addressing this issue. However, a simple JavaScript solution can elegantly resolve 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);

This crude but effective method ensures that only the selected option retains the specified color, while all others revert to white.

The above is the detailed content of How Can I Change the Background Color of a Selected Option in an HTML `` Element?. For more information, please follow other related articles on the PHP Chinese website!