Обзор jQuery-плагинов для стилизации селектов

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

Не секрет, что стандартные селекты имеют крайне слабый уровень стилизации средствами CSS. В каком-то браузере они чуть лучше, в каком-то чуть хуже, но общая картина складывается весьма грустной. Как обычно, там, где не справляется чистый HTML+CSS, на помощь приходит jQuery.

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

Стандартный select

Достоинства:

• работает на всех устройствах, в том числе на мобильных телефонах
• автоматически подстраивает ширину
• без проблем контролируется с помощью jQuery
• открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
• сам определяет оптимальную высоту для выпадающего списка
• позволяет группировать опции
• позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
• реагирует на переход Tab'ом
• имеет подбор по первой букве
• поддерживает скролл колёсиком мышки

Недостатки:

• выглядят во всех браузерах по разному
• не имеет возможности быть нормально стилизованным

Select Box Factory 2

Действительно большой плагин с кучей опций.
Объем: 29KB
Доп функции: (у данного плагина их очень много, приведу основные)

• автокомплит
• поддерживает мультиселект
• поддерживает любую стилизацию любого поля (включая картинки внутри пунктов)

Требования:

• jQuery 1.2.6+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• можно настроить как душе угодно

Недостатки:

• при отключённых скриптах превращается в тыкву абсолютно бесполезен
• не подменяет селекты, а создает свою структуру div'ами
• сложно установливать и настраивать
• не имеет «умного» позиционирования
• имеет мультиселект (но на маках вместо того чтобы зажимать cmd, приходится жать shift)
• не реагирует на Tab

jQuery Searchable DropDown Plugin

Гибрид select'а и autocomplete'а. Основан на стандартном селекте, то есть имеет практически все его достоинства и недостатки.
Объем: 12KB
Доп функции:

• автокомплит

Требования:

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• имеет все достоинства страндартного селекта
• работает с отключенным js
• прост и понятен в настройке

Недостатки:

• В IE6 автокомплит не работает так, как надо, хотя сам селект остается юзабельным.

jQuery Custom Select Box

Специфический плагин, его лучше посмотреть на примере. Не скрывает выбранные пункты, оставляя их видимыми.
Объем: 8KB
Доп функции:

• Можно настроить высоту, ширину, скролл, скорость и эффект открывания

Требования:

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• очень прост в установке
• довольно легок
• имеет мультиселект

Недостатки:

• нужен оборачивающий div
• не работает в IE6 (расползается по всей странице)

jQuery custom selectbox

Простой и лёгкий плагин, имеющий, к сожалению, некоторые недостатки.
Объем: 3KB
Доп функции:

• отключение плагина

Требования:

• jQuery 1.2+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• имеет маленький объем
• прост в установке
• умеет плавно разворачиваться

Недостатки:

• открывается только при клике на стрелочку
• не умеет группировать опции
• отсутствует возможность выделения сразу несколько пунктов
• не знает переключения стрелочками на клавиатуре
• не умеет задавать высоту выпадающего списка
• отсутствует «умное позиционирование»
• нажатие на Tab не знает
• не поддерживает IE6 (хотя совсем небольшая доработка CSS решает эту проблему)

jQuery Selectbox plugin

Простая подмена селекта. Плагин бесполезен из-за недостатков.
Объем: 8KB
Доп функции:

• Реализованы стандартные функции обычных селектов

Требования:

• jQuery 1.4+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• прост в установке
• имеет кастомные эффекты появления

Недостатки:

• не работает в IE6 и IE7
• если селект откажется внизу страницы, то вообще ничего не выпадет

jQuery SelectBox Plugin

Практически идеальный плагин.
Объем: 16KB
Доп функции:

• Реализованы стандартные функции обычных селектовов

Требования:

• jQuery 1.4.4+ (на jQuery 1.5.1 тоже работает)

Достоинства:

• очень прост в установке
• действительно кроссбраузернен
• предлагает очень классное описание плагина и «песочницу»
• обладает мультиселектом
• имеет подгруппы
• можно отключать опции
• автоподстраивает ширину
• реагирует на Tab
• реагирует на стрелки клавиатуры и скролл

Недостатки:

• небольшие баги в IE6
• нет умного позиционирования

jquery.sb.js Selectbox Replacement

Похож на предыдущий, и по некоторым параметрам даже превосходит его.
Объем: 20KB (вместе с дополнительными скриптами)
Доп функции:

• Реализованы стандартные функции обычных селектовов
• Можно через alt вставлять любую разметку внутрь опций (втом числе картинки)

Требования:

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)
• jquery.ba-throttle-debounce.min.js
• jquery.tie.js

Достоинства:

• очень прост в установке
• есть мультиселект
• есть подгруппы
• можно отключать опции
• автоподстраивает ширину
• реагирует на Tab
• реагирует на стрелки клавиатуры
• реагирует на скролл

Недостатки:

• не работает в IE6, просто оставляет стандартные
• не знает «умного позиционирования»
• тяжело пользоваться без стандартного описания

Плагины, которые на текущем этапе своего развития не достойны нашего внимания:

• CCombo (без поддержки IE6 и IE7, при этом не остаётся стандартным)
• Custom Select Box CSS Style Plugin: jQuery + CSS (не работает в IE6, просто оставляет стандартные, стилизирует только невыпадающую часть селекта)
• jQuery – Skinning HTML Select Boxes(не работает в IE6, глючит в FF и Safari)

Выводы

• Перед тем, как вы решите воспользоваться стилизированными селектами, обязательно оцените, точно ли вам это нужно.
• Обязательно протестируйте работу селектов при отключенном js. Это сэкономит вам кучу нервов, особенно если где-то в другом месте будет ошибка, и селекты не подгрузятся.
• Обязательно отключите всю эту красоту для мобильных бразеров, так как в них это выглядит уже не так красиво. Например у iPhone'ов очень удобно продуманы селекты. Для того, чтобы выбрать нужный пункт вовсе необязательно бесить пользователя зумом и прочими извращениями.
• Если вы всё-таки решитесь использовать стилизированные селекты на мобильниках, учтите — большинство из них не понимает overflow:scroll, то есть пользователь просто не увидет пунктов меню, к которым нужно скроллить (если плагин не выводит стандартный выпадающий список). Все остальные селекты на мобильниках годятся только для коротких списков, которым точно не потребуется скролл.
• Многие плагины используют float:left (в отличии от стандратных, которые можно вставить inline'ово). Конечно, любой плагин можно допилить для того, чтобы он вставлялся инлайново, но это потребует времени.

Я считаю минусом плагина то, что он не работает в IE6, однако для многих это не принципиально. Лично я из двух плагинов, одинаковых по функциональности, я в любом случаю выберу кроссбраузерный.
Объемы плагинов указаны только для их js-части (причём сжатой).


Данный обзор является пробой пера. Надеюсь, он будет полезен хабрасообществу. Приветствуются замечания и дополнения.

upd
Плагины, которые посоветовали хабраюзеры:

• cuSel — довольно неплохой плагин, активно развивается. Нет умного позиционирования, проблемы с навигацией клавиатурой, нет поддержки optgroup (посоветовал Shuichi)
• Sexy Combo — действительно крутой плагин, даже умное позиционирование есть, но очень медленный, судя по отзывам. Очень плохо реагирует на списки, в которых больше 100 элементов. Разработка остановлена (но есть форк, который, судя по всему, развивается) (посоветовал frog, в его комментарии целая куча различных плагинов для стилизации селектов)

Комбайны, которые заменяют все элементы форм:

• Uniform — заменяет даже поля загрузки файлов, имеет несколько подключаемых тем, но имеет и недостатки. (посоветовал skipfish)
• jqTransform — про него уже писали на хабре. Судя по комментариям, имеет очень много багов. (посоветовал skipfish)
• Niceforms — красивый плагин, но не работает навигация стрелочками, нет умного позиционирования, не поддерживает ie6, последняя версия от 2008 года. (посоветовал Defite)