Псевдоэлемент CSS `::picker()`

::picker() CSS псевдоэлемент выбирает часть элемента, отвечающую за пикер, например раскрывающийся пикер настраиваемого элемента select.

Синтаксис

::picker(<ident>) {
  /* ... */
}

Параметры

<ident>

Строка, обозначающая элемент, пикер которого нужно выбрать. Доступны следующие значения:

select

Раскрывающийся пикер настраиваемых элементов select.

Описание

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

Селектор ::picker(select) выбирает всех потомков настраиваемого элемента <select>, кроме первого дочернего элемента <button>; браузер группирует этих потомков и отображает их как пикер. Первый дочерний элемент <button> представляет кнопку управления, которая открывает пикер при нажатии.

Это позволяет выбирать всё содержимое пикера как единое целое, например, если нужно настроить его границу, анимировать его появление и исчезновение или расположить в другом месте, отличном от положения по умолчанию. В нашем руководстве по настраиваемым элементам select приведено много примеров использования ::picker(select).

Поведение пикера как всплывающего окна

Для элемента <select> и пикера автоматически задаётся неявная связь вызывающего элемента и всплывающего окна, как указано в Popover API. Подробнее о поведении всплывающих окон см. в разделе Использование Popover API, а типичный вариант использования, обеспечиваемый неявной связью со всплывающим окном, описан в разделе Анимация раскрывающегося пикера с помощью состояний всплывающего окна.

Позиционирование пикера относительно якоря

Ещё одно следствие упомянутой выше неявной связи вызывающего элемента и всплывающего окна — наличие у элемента <select> и пикера неявной ссылки на якорь. Это означает, что пикер автоматически связывается с элементом select с помощью позиционирования относительно якоря CSS. Это даёт несколько преимуществ, в частности:

• Стили браузера по умолчанию размещают пикер относительно кнопки (якоря), и это положение можно настроить, как описано в разделе Позиционирование элементов относительно якоря. Для справки ниже приведены соответствующие стили по умолчанию:

  inset: auto;
  margin: 0;
  min-inline-size: anchor-size(self-inline);
  min-block-size: 1lh;
  /* Go to the edge of the viewport, and add scrollbars if needed. */
  max-block-size: stretch;
  overflow: auto;
  /* Below and span-right, by default. */
  position-area: block-end span-inline-end;
  

• Стили браузера по умолчанию также задают резервные варианты position-try, которые перемещают пикер, если он может выйти за границы области просмотра. Резервные варианты position-try описаны в руководстве Резервные варианты и условное скрытие при переполнении. Для справки ниже приведены соответствующие резервные стили по умолчанию:

  position-try-order: most-block-size;
  position-try-fallbacks:
    /* First try above and span-right, */
    /* then below but span-left, */
    /* then above and span-left. */
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
  

Примеры

Базовое использование настраиваемого элемента select

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

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

Затем, например, можно удалить заданную по умолчанию чёрную border пикера:

::picker(select) {
  border: none;
}

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

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

См. также

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