search
HomeWeb Front-endCSS TutorialHow Can I Change the Background Color of a Selected Option in HTML?
Mary-Kate Olsen
Mary-Kate Olsen
Dec 07, 2024 am 01:20 AM

How Can I Change the Background Color of a Selected <select> Option in HTML? Option in HTML? " />

CSS Styling for HTML

In HTML, the

The CSS property "selected-color" does not exist for styling the background color of a selected

Javascript Solution

A more feasible approach involves using a combination of HTML, CSS, and Javascript to achieve the desired result. Here's how:

<select></select>

In the above HTML code, we have created a 

select {
    color: black; /* Default color for options */
}

This CSS sets the default color of all 

var sel = document.getElementById('mySelect');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i <p>In this Javascript code, we add an event listener to the <select> element. When an option is clicked, it loops through all the <option> elements and sets their color to white. Then, it sets the selected option's color to red.</option></select></p><p>By combining HTML, CSS, and Javascript, you can override the default blue background color of selected <select> options and customize it to your liking.</select></p>

The above is the detailed content of How Can I Change the Background Color of a Selected