Select - один из самых сложных для стилизации элементов формы. Но с помощью CSS можно сделать его привлекательным и функциональным. В этой статье рассмотрим основные приемы оформления выпадающих списков и полей выбора.
Базовая стилизация select
Для начала давайте вспомним, как выглядит стандартный select без стилей. В разных браузерах его внешний вид может немного отличаться, но общая концепция одинакова - прямоугольное поле с текстом и стрелкой, которая разворачивает выпадающий список опций.
Чтобы придать такому select индивидуальный вид, не нужны никакие дополнительные обертки или псевдоэлементы. Достаточно применить прямо к нему несколько базовых CSS-правил.
Свойство appearance для скрытия стандартного select
В CSS есть удобное свойство appearance, которое позволяет полностью скрыть стандартное отображение элемента. Для select достаточно прописать:
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }Теперь стандартная стрелка исчезнет, и мы сможем добавить на ее место любую кастомную картинку или фон.
Изменение paddings и margins
Большинство браузеров позволяют без проблем изменять внутренние и внешние отступы select. Например, чтобы сделать поле пошире, можно применить:
select { padding: .5em .8em; margin: 1em; }Это сразу сделает элемент выбора более вместительным и заметным на форме.
Добавление рамок и фона
Также поддерживаются стандартные правила оформления вроде границ, теней и заполнений:
select { border: 1px solid #ccc; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background: #fff url(arrow.png) no-repeat 90% 50%; }Это позволяет сделать select максимально похожим на обычное текстовое поле и согласовать его со стилем всей формы.
Замена стрелки выбора на кастомную
Как мы видели выше, стандартную стрелку можно легко скрыть свойством appearance. А на ее место вставить любое изображение, задав его фоном:
select { background: #fff url(arrow.png) no-repeat 90% 50%; background-size: 15px; }Главное - подобрать подходящий размер и позицию, чтобы стрелка смотрелась органично.
Кроссбраузерная поддержка стилей
Чтобы избежать проблем с отображением в разных браузерах, нужно не забывать про вендорные префиксы для свойств вроде appearance. Также отдельно стоит тестировать стили в старых версиях IE, которые зачастую ведут себя непредсказуемо.
Стилизация select
В целом же базовая стилизация select на чистом CSS оказывается проще, чем может показаться на первый взгляд. Несколько строк кода - и элемент выбора преображается, становясь ярким акцентом формы.
Дальше мы рассмотрим более сложные приемы визуального оформления, которые помогут сделать select максимально функциональным и привлекательным.
Расширенные приемы стилизации
Базовых стилей бывает недостаточно, чтобы реализовать по-настоящему креативный дизайн select. Давайте рассмотрим несколько более продвинутых приемов оформления.
Градиенты, тени и другие эффекты
Современные браузеры позволяют использовать для стилизации select практически любые эффекты: градиенты, несколько теней, закругленные углы, анимации и другое:
select { background: linear-gradient(to bottom, #eee, #fff); border-radius: .25em; box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 10px 15px rgba(0,0,0,.15) inset; transition: all .3s ease; }Главное следить за поддержкой в разных браузерах и не перебарщивать с эффектами, чтобы не испортить юзабилити.
Стилизация option средствами CSS и JavaScript
Пункты выпадающего списка option тоже можно оформлять при помощи CSS, но из-за особенностей отображения этот прием работает не везде одинаково:
select option { padding: .25em .5em; background: #f6f6f6; color: #454545; }Поэтому часто используют JavaScript, который гарантированно применит нужные стили к option в любом браузере.
Выравнивание и адаптивность select
Элементы выбора также можно гибко позиционировать с помощью свойств вроде float, position и media-запросов. Это позволяет отображать их оптимальным образом на разных устройствах:
@media (max-width: 600px) { select { width: 100%; float: none; } }Отображение разных состояний: фокус, ошибка, отключение
Помимо стандартного стиля нужно не забывать об оформлении таких состояний select, как фокус, ошибка валидации и отключение:
select:focus { border-color: #3385ff; } select:disabled { opacity: .5; pointer-events: none; }Это сделает форму более информативной и понятной для пользователя.
Стилизация: стрелки
Как видите, стилизация select на CSS предоставляет практически неограниченные возможности для реализации самых смелых дизайнерских идей. Главное - позаботиться о кроссбраузерной поддержке, юзабилити и доступности получившихся элементов управления. В следующих главах мы подробно рассмотрим эти важные аспекты.
