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

Адам Аргайл

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

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

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

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

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

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

appearance: base-select

Новое свойство CSS 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 .

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

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

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

Показаны четыре различных представления элемента «Выбрать». В первом представлен индикатор состояния в виде точки зелёного цвета с меткой «Вкл». Во втором показаны аватары рядом с параметрами. В третьем представлено средство выбора цветового пространства с настраиваемой меткой, встроенной в элемент «Выбрать». В последнем можно выбрать состояния «Черновик» или «Опубликовано».
Попробуйте это на Codepen .

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

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

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

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

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

Ресурсы

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

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

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