Как использовать псевдокласс для изменения цвета фона выбранных элементов в списке множественного выбора - PullRequest
Новая
       17

Как использовать псевдокласс для изменения цвета фона выбранных элементов в списке множественного выбора

0 голосов
/ 08 июня 2019

У меня есть список множественного выбора.Я пытаюсь получить что-то выбранное, чтобы иметь цвет фона, а все, что выбрано, чтобы не иметь его.

form> filed> select> опция, которую я назвал form id = opti, которую я пытался 

#opti option:focus {
    background-color: #ffd56f;
}
#opti option:active {
    background-color: #ffd56f;
}
#opti option:hover {
    background-color: orange;
}

наведение работает, но я заинтересован в изменении цвета фона выбранных элементов опции при выборе, а не только при наведении.

Если в css нет опции для этого, что является хорошей альтернативой (не давая мнессылка на готовое стороннее программное обеспечение), возможно, функцию javascript, которая запускается при изменении выбора элемента или при выборе и выборе одного элемента.

Любая помощь будет полезна

1 Ответ

0 голосов
/ 08 июня 2019

Вы можете использовать псевдокласс :checked.( Дополнительная информация о: проверенном псевдоклассе )

Но браузеры и операционные системы часто обрабатывают элементы select / option отдельно и не допускают некоторые или все стили.

Например, в Firefox (macOS) background-color из стиля игнорируется.Но вы можете использовать box-shadow для изменения цвета фона.

Но чтобы на вашей странице были полностью настроенные элементы select, которые выглядят и ведут себя во всех браузерах одинаково, вы также можете использовать замену-библиотека типа Выбрать2 . 

select option:hover {
  background-color: yellow;
}
select option:checked {
  background-color: red; /* NOT working on Firefox (macOS) */
  box-shadow: 0 0 0 10px orange inset; /* working on Firefox (macOS) */
}
<select multiple>
  <option value="1">Lorem</option>
  <option value="2">Ipsum</option>
  <option value="3">Stack</option>
  <option value="4">Overflow</option>
</select>
...