select - 如何更改所选选项背景的颜色？

Question

Note: the question is not about how to change the bg color of the selected option.

When I open a select dropdown, the current selected option has a different color, when I hover with the mouse this color jump to other option that I hover on

Is there a way to change the bg color of the current hover option?

Note: adding background-color: white; in hover state doesn't seems have an effect.

See the current css

and in hover state

Answer 1

If you mean the color BLUE HIGHLIGHT , well, it cant be change by CSS. Because it is from the browser. you can either use libraries or ul>li

Please see below, what you atleast can do. I hope this will help you.

 select option:checked { background: yellow; color: green; }

 <select> <option> I wanted to be happy </option> <option> I wanted money </option> <option> I wanted money </option> <option> I wanted money </option> </select>

Answer 2

Here is an alternative idea with js. May be it could be helpful.

 function classToSelectedOption() { var alreadySelected = document.querySelectorAll(".selected"); //Remove class to previus selected option [].forEach.call(alreadySelected, function(el) { el.classList.remove("selected"); }); //Add class to current selected option var value = document.getElementById("select").value; document.querySelector('option[ value=' + value + ']').classList.add("selected"); }

 select option { background: black; color: #fff; } select option.selected { background: red;important; }

 <select id="select" onchange="classToSelectedOption()"> <option value="first">first</option> <option value="second">second</option> <option value="third">third</option> <option value="fourth">fourth</option> </select>