How Can I Change the Background Color of a Selected Option in a `` Element Using CSS and JavaScript?

Customizing Selected Option Background Color in with CSS

While CSS provides ample styling options for

elements, it lacks a specific style attribute to alter the background color of the currently selected option. However, a combination of pure CSS and JavaScript can effectively address this limitation.

In the example HTML code provided, the element sets a background color for the dropdown list using "background-color:red;". However, upon selecting an option, it assumes the default blue color. To override this and customize the background color for the selected option, traditional CSS techniques fall short.

Here's where JavaScript steps in:

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

In this script:

• We retrieve the

element by its ID.

When the user clicks the element, it loops through all child elements (options) to set their color to white.

It then obtains the selected option and sets its color to red, highlighting it from the rest.

While this JavaScript solution allows for customizing the selected option's background color, it's important to note that it doesn't directly alter the CSS style of the element. It manipulates the element's dynamic appearance through JavaScript. This approach may be a viable solution when the requirement is to solely customize the selected option's background color and doesn't involve further CSS customization of the

element.

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