Элемент <select> всегда был проблемным в веб-разработке. Долгое время браузеры и операционные системы диктовали, как он должен выглядеть. Ни фон, ни стрелку, ни даже отступы нельзя было полноценно поменять. Разработчики десятилетиями прибегали к хакам: снимали оформление через appearance: none, скрывали нативный элемент и создавали кастомный дропдаун из div-ов и JavaScript.
С выходом Chrome 135 ситуация кардинально меняется. Появляется новое значение appearance: base-select, которое переводит <select> в «открытый» для стилизации режим. Теперь можно настраивать не только сам элемент, но и всё, что к нему относится — от выпадающего списка до иконки стрелки.
Что такое appearance: base-select
Свойство appearance управляет тем, выглядит ли элемент как системный UI-контрол или как обычный HTML-блок. Новое значение base-select отключает системное оформление и делает элемент полностью стилизуемым с помощью CSS. Чтобы это заработало, нужно применить его и к самому select, и к его выпадающему списку — ::picker(select) :
Без этого список опций останется нативным. Когда элемент переходит в режим base-select, становятся доступны новые псевдоэлементы и состояния: ::picker(select) для всплывающего списка, ::picker-icon для стрелки, ::checkmark для галочки выбранного пункта и псевдокласс :open, который срабатывает, когда дропдаун открыт.
Теперь можно помещать внутрь <option> не только текст, но и изображения или SVG-иконки. Раньше браузеры просто игнорировали такие попытки.
Как это работает на практике
Сначала мы переводим <select> в базовый режим. Затем можно оформить его как обычную кнопку: добавить фон, рамку, радиус скругления, паддинги и плавные переходы.
Далее можно оформить сам список. Теперь он ведёт себя как всплывающее окно и поддаётся полной кастомизации.
Иконку раскрытия можно переопределить с помощью ::picker-icon. Например, нарисовать её псевдоэлементом и анимировать при открытии списка:
Для опций теперь доступны стили наведения и выбора.
При желании можно добавить свою галочку через ::checkmark:
Совместимость и ограничения
Пока что вся эта магия работает только в браузерах на Chromium, начиная с версии 135. В Safari и Firefox новых возможностей ещё нет. Поэтому лучше использовать проверку @supports, чтобы не ломать внешний вид на других системах. Если браузер не поддерживает эту возможность, select просто останется в стандартном виде, что безопасно.
Стоит помнить и про доступность: фокус, клавиатурная навигация и поведение выбора должны сохраняться. Новый режим не мешает нативным сценариям, но при активной кастомизации важно не переборщить с анимациями и не ломать UX.
Заключение
Появление appearance: base-select — одно из самых заметных обновлений CSS-интерфейсов последних лет. Разработчики наконец могут стилизовать <select> без ухищрений и сторонних библиотек. Это не просто косметическое изменение, а реальный шаг к тому, чтобы веб-формы выглядели современно и единообразно на всех платформах.
Пока что это новинка только для Chrome и Edge, но, если тенденция сохранится, можно ожидать скорой поддержки и в других браузерах. Когда это случится, эпоха кастомных костылей для <select> наконец закончится.