LigaSelect – плагин для стилизации селектов. Разбираем-смотрим-используем


ligaselectОдним из самых неприятных моментов в работе, является верстка html-форм. Нюансом является то, что элементы формы select, checkbox, radio не подаются изменению через CSS. Ниже мы рассмотрим вариант стилизации раскрывающегося списка <select>

Вашему вниманию представляется плагин для замены стандартного select’а на нужный нам. Впрочем приступим уже к делу.

Сперва подключаются скрипты, вставляются между тегами <head></head>. По порядку сначала jQuery, затем наш плагин:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/js/ligaSelect.js"></script>

Запускаем его одним из двух вариантов:

// 1 вариант — применяем к select'ам с классом .class
$('.class').ligaSelect();

// 2 вариант — применяем ко всем select'ам
$('select').ligaSelect();

В итоге получаем select вот такого вида:
ligaSelect

Свойства плагина

Наш плагин также поддерживает такую фишку как задание подсказок к выпадающему списку. Работают они таким образом:

$('select').ligaSelect({optionHead:'Choose your country'});

И вот как это выглядит:
ligaSelect

Демо реализации можно посмотреть здесь.
Скачать плагин можно отсюда.

P.S.

По всем вопросам использования/багам/пожеланиям прошу отписываться в комментарии. Буду рад оперативно реагировать на просьбы :)