Кастомизация нативного select — вечная головная боль. JS-библиотеки тащат десятки килобайт кода и ломают доступность. Решение появилось в Chrome 133+:
appearance: base-select — это CSS-свойство, превращающее стандартный select в полностью стилизуемый компонент без единой строчки JavaScript. Главная ошибка — продолжать использовать appearance: none и вручную эмулировать поведение выпадашки.Что даёт base-select
appearance: base-select меняет модель отображения: option-элементы становятся стилизуемыми, появляются псевдоэлементы ::picker(select) (сам попап) и ::picker-icon (стрелка), а также псевдоклассы :open и :closed. В production-контексте — фильтры в админке, формы e-commerce, поиск по категориям — больше не нужен React Select или Select2.Пример production-решения для фильтра:
select {
appearance: base-select;
padding: 8px 12px;
border: 1px solid #c0c0c0;
border-radius: 4px;
}
select::picker(select) {
border: 1px solid #888;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
max-height: 200px;
}
option:hover {
background: #f0f0f0;
}
select::picker-icon {
content: '▼';
font-size: 10px;
color: #666;
}Практический совет: используйте
:open для стилей при открытом попапе — например, закругление рамки только сверху.Ключевые ограничения и trade-offs
— Поддержка: только Chrome 133+ (в Firefox и Safari пока нет). Для production, где важна кросc-браузерность, — используйте как progressive enhancement.
— Не путать с
appearance: none: base-select сохраняет нативное поведение и доступность.—
optgroup стилизуется через $lt;optgroup$gt; — жирный шрифт для подзаголовков.— Нельзя заменить option на произвольные HTML-элементы: это trade-off в пользу семантики и ARIA.
Предупреждение: не пытайтесь применять base-select для сложных компонентов с поиском или мультивыбором — для них всё ещё нужен JS. Типичная ошибка — стилизация
::picker(select) через position: absolute; это сломает выравнивание в layout.Когда использовать в production
Подходит для микро-интерфейсов: фильтры, формы обратной связи, кастомизация select в дизайн-системах. Если проект на чистом HTML/CSS — zero-dependency решение. Не подходит, если нужны Firefox/Safari или кастомная отрисовка option с иконками.
Вывод:
appearance: base-select — это сдвиг парадигмы: нативный select получает кастомизацию без JS, но с инженерным trade-off — только для Chromium, где стабильность layout и доступность важнее универсальной браузерной поддержки.