Выбор стилизации элемента select с помощью CSS в 2023 году

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

Базовые свойства для стилизации select

Для начала давайте посмотрим, какие основные параметры стилизации доступны. К ним относятся:

• Ширина и высота
• Свойства шрифта: размер, гарнитура, начертание и т.д.
• Цвета текста и фона
• Рамки
• Отступы
• Тени

Ниже пример того, как можно использовать эти свойства для базового оформления блока выбора:

select { width: 200px; height: 30px; font: 14px Arial; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 3px; padding: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

Однако стандартную стрелку такими стилями не изменить. Для этого есть три основных подхода.

Метод 1: Скрытие и замена фоновой картинкой

Первый способ заключается в следующем:

1. Скрыть стрелку браузера установив свойство appearance: none
2. Освободить место под новую стрелку при помощи отступов padding и background
3. Добавить нужную картинку в качестве фонового изображения background-image

Такой метод хорошо подходит для классических одиночных выпадающих списков. Но его сложнее адаптировать для других типов, например с возможностью множественного выбора.

Метод 2: Использование свойства pointer-events

Второй подход более гибкий, он основан на возможностях свойства pointer-events. Суть в следующем:

1. Скрыть стандартную стрелку через appearance: none
2. Добавить нужный элемент, например иконку, при помощи псевдо-элемента :after
3. Разрешить клик по этому элементу управления через pointer-events: none у селектов

То есть клик будет передаваться сквозь блок выбора на явно заданный элемент. Это позволяет использовать любые знаки и иконки.

Метод 3: Специальный знак через :after

Еще один распространенный прием — замена стрелки при помощи контента и свойства content:

1. Скрыть стрелку через appearance: none
2. Добавить нужный символ, цифру или букву с помощью content: "\2193"; в псевдоэлемент :after
3. Установить для этого элемента моноширный шрифт и повернуть при помощи transform: rotate()

Все три метода хорошо работают в современных браузерах. Выбор зависит от поставленных целей и типа элемента управления.

Дополнительные эффекты и состояния

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

Рамки и отступы

Например, увеличенные рамки и отступы сделают содержимое удобнее для чтения:

border: 0.2em solid; padding: .3em .5em;

Здесь граница привязана к текущему размеру шрифта, поэтому будет масштабироваться вместе с ним. Такой подход хорошо подходит для адаптивного дизайна.

Состояния элемента управления

Рассмотрим основные состояния select и как их можно стилизовать.

Отключенное поле

Для отключенного dropdown в первую очередь стоит оставить стилизацию на усмотрение браузера. Согласно требованиям доступности WCAG, контраст текста к фону отключенных элементов управления выбирается автоматически.

Однако можно явно указать некоторые параметры. Например, цвет рамки:

select:disabled { border-color: #aaa; }

При фокусе

Чтобы выделить активный select, используется синяя рамка и тень:

select:focus { border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }

Такой эффект хорошо заметен и соответствует цветовой схеме большинства сайтов.

Обязательное поле

Для полей, обязательных для заполнения, достаточно визуального выделения слева:

select[required] { border-left-width: 5px; }

Это экономит место и не перегружает дизайн лишними деталями.

Поле с ошибкой

Для отображения ошибки вместо красной рамки лучше добавить небольшой индикатор:

select[aria-invalid="true"]::before { content: ""; position: absolute; background: linear-gradient(45deg, red, white); width: 12px; height: 12px; border-radius: 50%; }

Такой маркер biblical ненавязчиво обозначит проблему при заполнении поля.

Кроссбраузерная совместимость

Рассмотренные выше свойства css select хорошо работают в современных браузерах. Но как быть со старыми версиями вроде IE?

Стилизация для Internet Explorer

Вариантов адаптации под IE 9+ несколько:

1. Использовать @supports для проверки поддержки свойств вроде appearance, shadows, gradients
2. Применять стили только для новых версий через @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
3. Подключать полифиллы на JavaScript для воспроизведения необходимого поведения

Особенности старых Opera и Firefox

В старых версиях браузеров на движке Presto и Gecko тоже были свои нюансы рендеринга элемента select. Кроссбраузерность достигается теми же методами прогрессивного улучшения, что и для IE.

Интеграция сторонних решений

Помимо чистого CSS существует множество готовых javascript решений для стилизации элементов select.

jQuery Form Styler

Одно из популярных решений - это плагин jQuery Form Styler. Он позволяет гибко настроить широкий набор элементов управления, в том числе и select.

Основные возможности для стилизации выпадающих списков:

• Изменение оформления выбранных option
• Анимация появления popup
• Темы оформления (bootstrap, metastyle и другие)
• Разнообразные варианты замены стандартной стрелки
• Поддержка RTL направления
• И многое другое

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

Select2

Еще одна популярная библиотека - Select2. Она изначально создавалась как замена стандартным select с расширенным функционалом.

Особенности Select2:

• Поиск по элементам списка
• Возможность задать placeholder
• Подгрузка option по мере прокрутки
• Поддержка тегов и автодополнения
• API для управления из JS
• Темизация и языковая локализация

Select2 хорошо подходит для реализации тег-систем, мультиязычных проектов, сложных иерархических структур. Но из-за замены нативного поведения стоит проявлять осторожность с доступностью.