Как изменить цвет шрифта активного элемента в выделенном множественном элементе?

Question

У меня есть элемент select с атрибутом множественного числа, например, так:

<select name="" id="selectGroup" multiple>
    ...
</select>

У меня есть стили для наведения и выбранного цвета следующим образом:

#selectGroup option:hover {
    background: lightblue;
}

#selectGroup option:checked {
    box-shadow: 0 0 10px 100px lightblue inset;
}

Теперь,проблема в том, что когда вы нажимаете на элемент (и делаете его активным), цвет шрифта меняется на белый.Я попытался использовать различные псевдоселекторы, такие как: active,: focus и т. Д., И даже просто поместил color в стиль для опции или только для select, но ничего не работает.

Это так?Можно ли изменить цвет активного элемента?

См. этот код ручки для примера: https://codepen.io/anon/pen/ywMQzp

Answer 1

Вы можете найти ответ в этом правиле CSS.Вы не можете переопределить стили по умолчанию для большинства входных данных формы, и один из наиболее часто используемых способов решения этой проблемы - преобразовать эти элементы в более простые в стиле (например, div).

select:-internal-list-box option:checked {
  background-color: -internal-inactive-list-box-selection !important;
  color: -internal-inactive-list-box-selection-text !important;
}

Дополнительные сведения приведены здесь:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms

Вы также можете увидеть эту тему: Как переопределить стили по умолчанию для элемента выбора, кратного