Псевдоэлемент CSS `::picker-icon`

::picker-icon — это CSS-псевдоэлемент, который выбирает значок средства выбора внутри элементов управления формы, связанных со значком. Для настраиваемого элемента select он выбирает значок стрелки на элементе <select>, которая указывает вниз, когда список закрыт.

Синтаксис

::picker-icon {
  /* ... */
}

Описание

Псевдоэлемент ::picker-icon выбирает значок средства выбора элементов управления формы, то есть значок, отображаемый на кнопке управления. Его можно выбрать только в том случае, если исходный элемент имеет средство выбора и для него задан базовый внешний вид с помощью свойства appearance со значением base-select. Создаваемый им блок отображается после любых блоков, созданных псевдоэлементом ::after, со значком, заданным в таблице стилей браузера по умолчанию; его можно настроить с помощью свойства content.

Селектор ::picker-icon можно использовать для выбора стрелки, направленной вниз и расположенной у конца строчной оси настраиваемого элемента select. Это полезно, например, если вы хотите изменить цвет или размер значка, использовать другой значок (с помощью content или SVG) либо анимировать его при открытии и закрытии средства выбора.

В настоящее время единственный вариант использования ::picker-icon — выбор значков средства выбора в настраиваемых элементах <select>, однако в будущем могут появиться и другие варианты.

Примеры

Анимация значка средства выбора

Чтобы включить функциональность настраиваемого элемента select, для элемента <select> и его средства выбора необходимо задать значение base-select свойства appearance:

select,
::picker(select) {
  appearance: base-select;
}

Затем, например, можно выбрать ::picker-icon, задать для него пользовательское значение color и transition, чтобы изменения его свойства rotate плавно анимировались:

select::picker-icon {
  color: #999999;
  transition: 0.4s rotate;
}

В следующем правиле ::picker-icon объединяется с псевдоклассом :open, который выбирает значок только при открытом средстве выбора, — в результате при открытии <select> он плавно переходит к значению 180deg свойства rotate.

select:open::picker-icon {
  rotate: 180deg;
}

Полный пример с этим кодом и его отображением можно посмотреть в разделе Стилизация значка средства выбора.

Спецификации

Совместимость с браузерами

См. также

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::checkmark
• :open, :checked
• Настраиваемые элементы select