Кнопка <выбрать> элемент теперь можно настроить с помощью CSS

Адам Аргайл

Опубликовано: 24 марта 2025 г.

Начиная с Chrome 135, веб-разработчики и дизайнеры наконец-то могут объединиться для создания доступного, стандартизированного и стилизованного CSS-элемента <select> в Интернете. На разработку ушло много лет, многие часы проектирования и совместной работы над спецификациями, и в результате получился невероятно богатый и мощный компонент, который не сломается в старых браузерах.

Вот видео индивидуального выбора с использованием этих новых функций:

Включая демо Уны , Брехта и Адама .

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

Также есть новая блестящая документация по MDN для настраиваемого select , полная подробностей.

Встречайте appearance: base-select

Новый appearance: base-select , который переводит элемент <select> в новое, настраиваемое и стилизованное состояние, которое обычно называют «базовыми» стилями:

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

Использование base-select открывает ряд новых функций и вариантов поведения:

Использование base-select теряет ряд функций и вариантов поведения:

  • <select> не отображается за пределами панели браузера.
  • Он не запускает встроенные компоненты мобильной операционной системы.
  • <select> перестает принимать ширину самого длинного <option> .

<select> теперь может включать в себя богатый HTML-контент.

Прежде чем вы могли настроить <select> , если вы помещали в элемент <option> такие вещи, как изображение или SVG, браузер игнорировал их.

Рассмотрим следующий HTML-код: браузер будет читать его так, как вы его написали:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Однако используемый DOM не будет включать <svg> :

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

Вот (слева направо) Chrome, Safari и Firefox, отображающие предыдущий HTML. Если браузер поддерживает appearance: base-select , тогда SVG появится в этом параметре, в противном случае — нет.

Показаны Chrome, Safari и Firefox, отображающие выделение с SVG внутри. Chrome показывает изображения, Safari и Firefox визуализируются так, как будто изображений нет.
Попробуйте это в этом Codepen .

Существует риск поломки существующих веб-сайтов с настраиваемым выбором из-за изменений в парсере. В Chrome есть функции, лежащие в основе эксперимента Finch, на случай, если возникнет необходимость его отключить. Если дела пойдут хорошо, эксперимент завершится, и код будет навсегда отправлен в исходный код.

Полностью настраиваемый

Каждую часть base-select можно заменить, настроить и анимировать. Вот демо-версия, в которой используются все новые функции для создания узнаваемых и содержательных избранных возможностей.

Показаны четыре различных представления элемента select. На первом имеется зеленая точка индикатора состояния с надписью «включено». Следующий показывает аватары рядом с опциями. Третий — это средство выбора цветового пространства со встроенной в него настраиваемой меткой. Последний позволяет выбирать черновые или опубликованные состояния.
Попробуйте это в этом Codepen .

Еще больше примеров вы найдете в разделе ресурсов в конце этого поста.

Неизмененные интерфейсы JavaScript

Нет никаких рисков для существующих взаимодействий JavaScript с элементом <select> .

Однако если вы начнете добавлять расширенный HTML-код в элементы <option> , вам следует протестировать выбранные значения, поскольку браузер по-прежнему анализирует и игнорирует изображения и SVG. Однако изменилась логика определения выбранной строки контента, и в зависимости от того, какие у вас есть параметры, вам может потребоваться внести изменения.

Если вы используете атрибут value в <option> , вам не о чем беспокоиться.

Ресурсы

Chrome первым реализовал base-select , но в спецификациях участвовали все браузеры, и еще предстоит доработать еще несколько «базовых» элементов. Это только начало.

Оставайтесь с нами, мы продолжим добавлять рекомендации, примеры и ресурсы по настройке выбранных элементов. А пока просмотрите следующие ссылки для получения дополнительной информации.

Особая благодарность всем, кто причастен к этому!