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: Скрытие и замена фоновой картинкой
Первый способ заключается в следующем:
- Скрыть стрелку браузера установив свойство appearance: none
- Освободить место под новую стрелку при помощи отступов padding и background
- Добавить нужную картинку в качестве фонового изображения background-image
Такой метод хорошо подходит для классических одиночных выпадающих списков. Но его сложнее адаптировать для других типов, например с возможностью множественного выбора.
Метод 2: Использование свойства pointer-events
Второй подход более гибкий, он основан на возможностях свойства pointer-events. Суть в следующем:
- Скрыть стандартную стрелку через appearance: none
- Добавить нужный элемент, например иконку, при помощи псевдо-элемента :after
- Разрешить клик по этому элементу управления через pointer-events: none у селектов
То есть клик будет передаваться сквозь блок выбора на явно заданный элемент. Это позволяет использовать любые знаки и иконки.
Метод 3: Специальный знак через :after
Еще один распространенный прием — замена стрелки при помощи контента и свойства content:
- Скрыть стрелку через appearance: none
- Добавить нужный символ, цифру или букву с помощью content: "\2193"
;в псевдоэлемент :after - Установить для этого элемента моноширный шрифт и повернуть при помощи 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+ несколько:
- Использовать
@supportsдля проверки поддержки свойств вроде appearance, shadows, gradients - Применять стили только для новых версий через @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
- Подключать полифиллы на 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 хорошо подходит для реализации тег-систем, мультиязычных проектов, сложных иерархических структур. Но из-за замены нативного поведения стоит проявлять осторожность с доступностью.
