«Нестандартный SELECT» или «Изменение внешнего вида и оформления SELECT»

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

Стили CSS довольно скудно позволяют настраивать внешний вид SELECT'ов: им можно задать цвет бэкграунда, но при этом нельзя в качестве бэкграунда задать картинку. О чём думали, когда это делали?

Изменить оформление злосчастного выкидного списка можно и помогает в этом нам jQuery и другие подобные библиотеки. Плагины для этих библиотек подменяют стандартный селект на выкидной список, сделанный из классических тегов <div>, <p>, <ul> и так далее, а с ними CSS нам позволяет работать на все 100%.

Тем не менее не всё так гладко, как хотелось бы. Очень много рыская в интернете в поисках подобных скриптов, я натыкался на различные вариации, обладающие различными недостатками, из-за чего проблему замены SELECT'ов я считаю довольно актуальной. Я не буду приводить всё, что я нашёл, остановлюсь на нескольких.

Изменённые SELECT'ы без полосы прокрутки

Это наиболее распространённые селекты, недостаток которых указан в названии. Зачастую они прекрасно работают, ничего более и не надо, однако если список превышает 15-20 элементов, то страница растягивается очень далеко, а у селекта нет никаких полос прокрутки. Проблема? При больших списках не просто проблема, а катастрофа.

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

SELECT'ы, заточенные под старинные версии библиотек

Оставляю пункт без комментариев и примеров, так как кому нужны примеры для jQuery 1.0.1 и подобных.

Адекватные оформления SELECT'ов

Самый адекватный скрипт, представленный по ссылкам с примерами чуть ниже, оказался находкой. Всё хорошо, всё красиво, есть даже очень приятный плюс, заключающийся в том, что есть возможность автозаполнения — прописываешь название (как в input'е) и он тебе выберет и покажет доступные варианты.

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

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

Напоследок

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

[UPD] Пока писал пост, плагин с сайта xiper.net взяли и обновили, буквально вчера, уже успели выявить несколько недочётов. У него теперь есть своё название - cuSel. Потестить плагин ещё не успел, но, думается, нововведения придутся по вкусу. Ссылки на плагин я чуть выше изменил - под кнопкой "Пример 1" пример необновлённого плагина, а под "Пример 2" - пример с обновлённым плагином.

AJAX, CSS, jQuery

(голосов: 11, средний: 3.45 из 5)