Стилизация select - возможности и тонкости оформления элементов выбора средствами CSS

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 предоставляет практически неограниченные возможности для реализации самых смелых дизайнерских идей. Главное - позаботиться о кроссбраузерной поддержке, юзабилити и доступности получившихся элементов управления. В следующих главах мы подробно рассмотрим эти важные аспекты.