Подключите CSS файл в разделе head:

.. ..

Если вы захотите применить другую тему оформления, не забудьте скопировать CSS файл в папку проекта.

Применяем стиль к Select

При использовании EasyDropDown.js, ваша разметка остаётся ясной и интуитивно-понятной. Вам нужно просто добавить обычный элемент select . Вы так же можете отключать данный элемент, присваивать лэйбл и обозначить элемент, который должен быть выбран по умолчанию.

Для стилизации элемента достаточно приписать к нему класс dropdown . Вот и пример:

Setting Option 1 Option 2 Option 3 Option 4 Option 5

Вот и всё, больше ничего вам не нужно. Теперь ваш элемент SELECT будет более симпатичным.

Если вам нужно изначально выделить какой-то элемент, воспользуйтесь атрибутом selected . В данном случае мы не рекомендуем использовать лэйбл, т.к. отображение может немного нарушиться.

... Option 2 ...

Вы так же можете отключить элемент, добавив атрибут disabled:

...

Выбор темы

В комплекте с плагином EasyDropDown.js поставляется 2 стилевые темы: Metro и Flat . Для того чтобы их подключить, воспользуйтесь HTML5 атрибутом data-attribute .

Для применения другой темы, внутри элемента SELECT напишите data-settings="{"wrapperClass":"theme-name"}" . Параметр theme-name может принимать значения: metro или flat . Примеры:

...

Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.

В статье мы рассмотрим, как изменить внешний вид select-ов. Однако мы будем придерживаться следующей идеологии. Кастомизировать имеет смысла только дефолтное свёрнутое состояние селекта, а оформление выпадающего списка должно оставаться стандартным. Поэтому решение, описанное ниже, не подойдет, если вам требуется сложный выпадающий список, например, с иконками или чекбоксами для каждого option.

С другой стороны такой подход позволяет:

1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).

2. Раз за поведение и оформление выпадающего списка отвечает браузер, то и не требуется писать какое-то отдельное решение для мобильных устройств, которое позволяло бы удобно работать с селектами на тач-устройствах с маленькими экранами. Встроенные нативные селекты сами принимают нужный вид, ведь на мобильных платформах уже всё продумано. Например, пользователи iOS при клике по селекту увидят не ваш кастомный список, а стандартный привычный. Пользователям не нужно будет подстраивать своё поведение под ваш конкретный сайт, его поведение будет таким же как на всех других сайтах. И ему это удобно, а ради него вы и делали сайт.

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это appearance . Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение none , которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут - стрелочку вниз справа.

Select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

Select { background: transparent; display: block; width: 100%; border: 1px solid #a7a7a7; color: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1.4; font-weight: normal; padding: 7px 10px 7px 10px; height: 36px; vertical-align: top; outline: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg" .

Получится следующий результат.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Поскольку стрелка используется нестандартная, то можно переместить её влево или использовать вместо стрелки любое другое изображение, а можно и вовсе обойтись без иконок.

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .

Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.

Не поддаются полной стилизации следующие элементы html-форм:

• раскрывающийся список ;
• флажок ;
• переключатель .
• поле для отправки файла .

Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.

Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.

Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).

Демонстрация работы плагина

На вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.

Достоинства

• При отключенном JavaScript отображаются стандартные селекты.
• Небольшой размер скрипта, примерно 4 килобайта.
• Работает в IE6+ и всех современных десктопных браузерах.
• Выводится внутристрочно.
• Легко поддается оформлению через CSS.
• Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
• Автоматически подстраивает ширину, если она не указана.
• Поддерживает прокрутку колесом мыши.
• Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
• Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
• Поддерживает атрибут «disabled».
• Работает и с динамически добавляемыми/изменяемыми селектами.

Недостатки

• Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
• Не поддерживает группировку элементов списка (тег ).
• Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «SelectBox Styler»

Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012

Обновления 22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега . Подключение плагина

Если на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :

Сразу после jQuery подключите файл со скриптом:

(function($) { $(function() { $("select").selectbox(); }) })(jQuery)

Этот код поместите перед тегом после вышеуказанных файлов.

При динамическом изменении селектов необходимо запустить триггер refresh , например:

(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)

HTML-код после выполнения плагина

Его структура выглядит следующим образом:

-- Выберите --

• -- Выберите --
• Пункт 1
• Пункт 2
• Пункт 3

-- Выберите -- Пункт 1 Пункт 2 Пункт 3

CSS-классы, используемые для оформления селекта

Чтобы оформить селекты с помощью CSS, используйте следующие классы:

.selectbox	родительский контейнер для всего селекта
.selectbox .select	селект в свернутом состоянии
.selectbox.focused .select	фокус на селекте, когда нажата клавиша Tab
.selectbox .select .text	вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей»
.selectbox .trigger	правая часть свернутого селекта (условный переключатель)
.selectbox .trigger .arrow	вложенный тег для переключателя (стрелка)
.selectbox .dropdown	обертка для выпадающего списка
.selectbox .dropdown ul	выпадающий список
.selectbox li	пункт (опция) селекта
.selectbox li.selected	выбранный пункт селекта
.selectbox li.disabled	отключенный (недоступный для выбора) пункт селекта

Заключение

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