CODEWITHSUNDEEP
css
Elia Weiss
Elia Weiss

Reputation: 10030

select - How to change the color of the selected option background?

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

enter image description here

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

enter image description here

and in hover state enter image description here

Upvotes: 0

Views: 7837

Answers (2)

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

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>

Upvotes: 0

Jovylle
Jovylle

Reputation: 971

enter image description here

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>

Upvotes: 1

Related Questions