select - Как изменить цвет фона выбранной опции?

Question

Примечание: вопрос не в том, как изменить цвет bg выбранной опции.

Когда я открываю раскрывающийся список выбора, текущий выбранный вариант имеет другой цвет, когда я наводил указатель мыши на этот переход цвета к другому варианту, на котором я наведен

Есть ли способ изменить цвет bg текущего параметра наведения?

Примечание: добавление background-color: white; в состояние hover, похоже, не имеет эффекта.

См. Текущий css

и в состоянии наведения

Answer 1

Если вы имеете в виду цвет BLUE HIGHLIGHT, ну его нельзя изменить на CSS. Потому что это из браузера. вы можете использовать libraries или ul>li

Пожалуйста, посмотрите ниже, что вы, по крайней мере, можете сделать. Надеюсь, это вам поможет.

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

Вот альтернативная идея с js. Может быть, это поможет.

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>