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

Question

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

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

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

716 3

html css css3 css-selectors pseudo-class

3 ответов:

Comments

Ничего не найдено.

Emmett · Accepted Answer · 2015-05-25 16:44:44

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

источник: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 */

Antwan · Accepted Answer · 2015-05-25 16:46:14

на самом деле вы можете только стиль несколько свойств CSS на :изменен элементы вариант. 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>
работает на gecko / webkit.

Neoweiter · Accepted Answer · 2013-12-12 10:58:03

это сработало для меня:
select option {
   color: black;
}
select:not(:checked) {
   color: gray;
}