it-swarm.com.ru

CSS: выбранный псевдокласс, подобный: проверено, но для элементов <select>

Есть ли способ стилизовать текущий выбранный элемент <option> в элементе <select>?

Я мог бы тогда дать цвет фона для выбранного в данный момент элемента option? Таким образом, я могу стилизовать параметр, который в данный момент доступен для просмотра в закрытом раскрывающемся списке.

70
Web_Designer

псевдокласс :checked изначально применяется к таким элементам, которые имеют атрибуты selected и checked HTML4

Источник: w3.org


Итак, этот CSS работает, хотя стилизация color возможна не во всех браузерах:

option:checked { color: red; }

Пример этого в действии, скрытие текущего выбранного элемента из выпадающего списка.

option:checked { display:none; }
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

Чтобы стилизовать текущую выбранную опцию в закрытом также, вы можете попробовать изменить логику:

select { color: red; }
option:not(:checked) { color: black; } /* or whatever your default style is */
95
Emmett

На самом деле вы можете только стилизовать несколько CSS-свойств для элементов :ified. color не работает, background-color также, но вы можете установить background-image.

Вы можете связать это с градиентами, чтобы добиться цели.

option:hover,
option:focus,
option:active,
option:checked {
  background: linear-gradient(#5A2569, #5A2569);
}
<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Работает на геккон/webkit.

15
Antwan

Это сработало для меня:

select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}
2
Neoweiter