jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Плагин jQuery Form Styler

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

  • флажок <input type="checkbox">;
  • переключатель <input type="radio">;
  • поле для выбора файла <input type="file">.
  • поле для ввода чисел <input type="number">.
  • раскрывающийся список <select>;

к содержанию ↑

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

Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при оформлении элементов форм не использовано ни одного изображения, только CSS.

к содержанию ↑

Достоинства

  • Общее:

    • Простота оформления с помощью CSS.
    • При отключенном JavaScript отображаются стандартные элементы форм, т.е. их работоспособность не теряется.
    • Псевдоэлементы выводятся внутристрочно, т.е. повторяют свойство стандартных элементов.
    • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
    • Поддержка атрибутов checked, selected, disabled.
    • Атрибуты class, id, data-*, title, указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы (id передается с суффиксом, чтобы избежать дублирования).
    • Поддержка динамического добавления/изменения атрибутов class, id, data-*, title.
    • Поддержка сброса формы при нажатии на <input type="reset">.
    • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
    • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
    • Поддержка валидации HTML5.
  • Для селектов:

    • Поддерживает атрибут multiple, т.е. позволяет выбирать несколько пунктов (мультиселект).
    • Поддерживает группировку элементов списка в селекте (тег <optgroup>).
    • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height, либо через опцию selectVisibleOptions).
    • Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
    • Поддержка поиска по пунктам одиночного селекта.
    • Поддержка замещающего текста (placeholder).
    • Автоматически подстраивает ширину, если она не указана.
    • Поддерживает прокрутку колесом мыши.
к содержанию ↑

Недостатки

  • При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

    setTimeout(function() {
    	$('input, select').styler();
    }, 100)
    

    Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.
к содержанию ↑

Скачать

Плагин «jQuery Form Styler»

Версия: 1.7.6 | Последнее обновление: 05.06.2016

Плагин на GitHub | Плагин в CDN jsDelivr

к содержанию ↑

Подключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

  1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:

    <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
    
  2. Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:

    (function($) {
    $(function() {
    
    	$('input, select').styler();
    
    });
    })(jQuery);
    
к содержанию ↑

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$('select').styler('destroy');
к содержанию ↑

Динамическое изменение

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

$('button').click(function(e) {
	e.preventDefault();
	/* делаем чекбокс неактивным */
	$('input:checkbox').attr('disabled', true)
		/* обновляем состояние псевдочекбокса */
		.trigger('refresh');
});

При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger('refresh') необходимо запускать, используя setTimeout, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$('form').validate({
	invalidHandler: function() {

		setTimeout(function() {
			$('input, select').trigger('refresh');
		}, 1)

	}
});
к содержанию ↑

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

ОпцияПо умолчаниюОписаниеdata-атрибут
idSuffix-stylerсуффикс к атрибуту id, передаваемому от стилизуемого элемента
filePlaceholderФайл не выбрантекст по умолчанию в поле выбора файла (когда файл не выбран)data-placeholder
fileBrowseОбзор...текст кнопки у поля для выбора файлаdata-browse
fileNumberВыбрано файлов: %sтекст после выбора нескольких файлов, вместо %s вставится числоdata-number
selectPlaceholderВыберите...замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: <option></option>data-placeholder
selectSearchfalseпоказывать поисковое поле в одиночном селекте (true — да, false — нет)data-search
selectSearchLimit10минимальное количество пунктов одиночного селекта, при котором показывать поискdata-search-limit
selectSearchNotFoundСовпадений не найденотекст сообщения о том, что нет пунктов, удовлетворяющих поискуdata-search-not-found
selectSearchPlaceholderПоиск...текст по умолчанию в поисковом полеdata-search-placeholder
selectVisibleOptions0количество отображаемых пунктов списка в простом селекте без прокруткиdata-visible-options
singleSelectzIndex100уровень слоя с псевдоселектомdata-z-index
selectSmartPositioningtrueумное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
'-1' — позиционирование отключено
data-smart-positioning
к содержанию ↑

Колбеки (callbacks)

НазваниеПо умолчаниюОписание
onSelectOpenedfunction() {}запускается при раскрытии списка селекта, целевой селект можно захватить через $(this)
onSelectClosedfunction() {}запускается при закрытии списка селекта, целевой селект можно захватить через $(this)
onFormStyledfunction() {}запускается после выполнения плагина

Пример использования:

(function($) {
$(function() {

	$('input, select').styler({
		fileBrowse: 'Выбрать',
		singleSelectzIndex: '999',
		onSelectOpened: function() {
			// к открытому селекту добавляется красная обводка
			$(this).css('outline', '3px solid red');
		}
	});

})
})(jQuery)
к содержанию ↑

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

Чекбокс
.jq-checkboxчекбокс по умолчанию
.jq-checkbox__divдополнительный вложенный тег
.jq-checkbox.checkedвыбранный чекбокс
.jq-checkbox.disabledнеактивный (недоступный для выбора) чекбокс
.jq-checkbox.focusedфокус на чекбоксе, когда нажата клавиша Tab
.jq-checkbox spanдополнительный вложенный тег
Радиокнопка
.jq-radioрадиокнопка по умолчанию
.jq-radio__divдополнительный вложенный тег
.jq-radio.checkedвыбранная радиокнопка
.jq-radio.disabledнеактивная (недоступная для выбора) радиокнопка
.jq-radio.focusedфокус на радиокнопке, когда нажата клавиша Tab
.jq-radio spanдополнительный вложенный тег
Поле для выбора файла
.jq-fileродительский контейнер
.jq-file.focusedфокус на поле
.jq-file.changedфайл выбран
.jq-file.disabledнеактивное поле
.jq-file__nameполе с именем файла
.jq-file__browseкнопка выбора файла
Поле для ввода чисел
.jq-numberродительский контейнер
.jq-number.focusedфокус на поле
.jq-number.disabledнеактивное поле
.jq-number__fieldобертка для поля ввода
.jq-number__spin.minusкнопка «минус»
.jq-number__spin.plusкнопка «плюс»
Селект (простой)
.jq-selectboxродительский контейнер
.jq-selectbox.openedвыпадающий список селекта раскрыт
.jq-selectbox.dropupвыпадающий список селекта раскрыт вверх
.jq-selectbox.dropdownвыпадающий список селекта раскрыт вниз
.jq-selectbox.changedвыбрано значение, отличное от заданного по умолчанию
.jq-selectbox__selectселект в свернутом состоянии
.focused .jq-selectbox__selectфокус на селекте, когда нажата клавиша Tab
.disabled .jq-selectbox__selectнеактивный (недоступный для выбора) селект
.jq-selectbox__select-textдополнительный вложенный тег для свернутого селекта
.jq-selectbox .placeholderзамещающий текст
.jq-selectbox__triggerправая часть свернутого селекта (условный переключатель)
.jq-selectbox__trigger-arrowвложенный тег для переключателя (стрелка)
.jq-selectbox__dropdownобертка для выпадающего списка
.jq-selectbox__searchобертка для поискового поля
.jq-selectbox__search inputпоисковое поле
.jq-selectbox__not-foundсообщение об отсутствии результатов поиска
.jq-selectbox ulвыпадающий список
.jq-selectbox liпункт (опция) селекта
.jq-selectbox li.selectedвыбранный пункт селекта
.jq-selectbox li.disabledнеактивный (недоступный для выбора) пункт селекта
.jq-selectbox li.optgroupзаголовок для группы пунктов
.jq-selectbox li.optionпункт списка в группе
Селект (множественный)
.jq-select-multipleродительский контейнер
.jq-select-multiple.disabledнеактивный (недоступный для выбора) селект
.jq-select-multiple liпункт (опция) селекта
.jq-select-multiple li.selectedвыбранный пункт селекта
.jq-select-multiple li.disabledнеактивный (недоступный для выбора) пункт селекта
.jq-select-multiple li.optgroupзаголовок для группы пунктов
.jq-select-multiple li.optionпункт списка в группе
Прочие элементы (только CSS)
.stylerкласс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)
к содержанию ↑

История изменений

Находится здесь.

к содержанию ↑

Стилизация без плагина

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

к содержанию ↑

Примеры различных решений

Полезные комментарии (12)
Комментарии (2 212)
  1. 1
    Дарья

    Добрый день!
    Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?
    Проблема в том, в select’е не работает аттрибут data-placeholder.

    Пробовала по-разному:
    c data-placholder и пустым первым option (последний ответ Zack Jordan)
    только с data-placeholder (как в доках)
    Оба варианта не работают.

    В первом случае (с пустым option) при загрузке страницы вместо подсказки — пустое поле, и оно отображается в выпадающем списке (при этом текст внутри div.jq-selectbox__select-text пустой и класс placeholder к этому div’у не применился).

    Во втором — вместо подсказки выводится первый элемент из options select’а (он же внутри div.jq-selectbox__select-text, и класс placeholder тоже не применился).

    Вот пример использования:

    <select data-placeholder="Выберите регион" class="..." id='location' name="{{ form.location.html_name }}">
     <option></option> <!-- Во втором варианте без этой строки -->
     {% for id, name in form.location.field.choices %}
     <option value="{{ id }}"{% if form.location==id" %} selected{% endif %}>{{ name }}</option>
     {% endfor %}
    </select>
    

    Интересно что, для самого простого примера, без тегов джанги, также не работает.

    • 2

      На странице примеров все работает, значит причина где-то у вас. И непонятно, при чем здесь плагин chosen, ссылки на который вы даете.

      Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?

      Не знаю, я не знаком с Django.

  2. 3

    Возникла трудность с плагином, в селектах не работает поиск. Консоль пустая, даже не знаю в какую сторону копать. Возможно, есть какие-то распостраненные ошибки по этому поводу?

  3. 7
    shaman

    проблемка такая:

    есть страничка с кодом

    Выбрать
    111
    222
    333

    111
    222

    На новой html страничке все работает, а вот как с вашим плагином получить доступ к (option value=»1″) чтобы установить ему атрибут (‘selected’,’selected’)»

    Заранее благодарен )

  4. 8
    shaman

    Извиняюсь, пока разбирался, как добавить код странички, он уже добавился. Но сам код так и не видно (

  5. 10
    Александр

    Здравствуйте, при динамическом select’е когда подгружается зависимый select изменяется его ширина, становится равная самому длинному пункту.
    Указываю $(«#subcategory»).css({‘min-width’:’337px’, ‘max-width’:’337px’}) не работает.

  6. 15
    Дмитрий

    У меня селект в Хедере, соответственно распространяется влияние на селекты на страницах. Как защитить другие селекты от изменений?

  7. 17
    Kenny

    С версией жиквери 3.1.1 селект изначально открывается вверх. Пробовал версию 2.1.1 — все норм. Как исправить?

  8. 20
    Вячеслав

    Можно ли запретить обработку отдельных элементов этим плагином? Например, добавив класс jq-disable?

  9. 22
    Александр

    Мобильные устройства не поддерживаются?

  10. 24
    Slava

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

  11. 25
    Александр

    Здравствуйте люди добрые! Нужна помощь! Не могу разобраться как подключить плагин к связанным динамическим селектам. Прочитал все комменты от корки до корки испробовал все советы но видимо делаю что то не так. Есть три селекта. При загрузке страницы плагин подключается и работает.. но при изменении первого второй селект принимает стиль по умолчанию. Пробовал вставить в скрипт вот это jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }}); но срабатывает только при повторном нажатии на первый селект.
    Вот пример моего кривого кода..
    Sect.php

     <script language="javascript">
    var request;
    var dest;
     
    function processStateChange(){
     if (request.readyState == 4){
     contentDiv = document.getElementById(dest);
     if (request.status == 200){
    response = request.responseText;
    contentDiv.innerHTML = response;
     } else {
    contentDiv.innerHTML = "Error: Status "+request.status;
     }
     }
    }
     
    function loadHTML(URL, destination){
     dest = destination;
     
     if (window.XMLHttpRequest){
     request = new XMLHttpRequest();
     request.onreadystatechange = processStateChange;
     request.open("GET", URL, true);
     request.send(null);
     } else if (window.ActiveXObject){
     request = new ActiveXObject("Microsoft.XMLHTTP");
     if (request) {
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send();
     }
     }
    }
    
    </script>
    <script>
    (function($) {
    $(function() {
    
     $('input, select').styler();
    
    });
    })(jQuery);
    </script>
    
    <? CModule::IncludeModule("iblock");
     
     $IBLOCK_ID=8;
     $str = "";
     $str .= "<select class=\"sort-list-select1\" name=\"SECTION_ID\" id=\"q1\" onchange=\"loadHTML('/structura/ajax.php?id='+this.options[this.selectedIndex].value,'label');\" >";
     $str .="<option>Выбор марки</option>";
     
     $arFilter = Array('IBLOCK_ID'=>$IBLOCK_ID, "DEPTH_LEVEL" => 1, 'GLOBAL_ACTIVE'=>'Y');
     $db_list = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter, true);
     while($ar_result = $db_list->GetNext())
     {
     $str .= "<option value=\"".$ar_result['ID'] ."\">".$ar_result['NAME']."</option>"; 
     }
    ?>
    <div class="sort-form">
    
    <form>
     <table class="sort-list-table">
     <tbody><tr>
     <td>Выберите мотоцикл</td>
     <td><?=$str?></td>
     <td>
     <div id="label">
     <select id="q2" class="sort-list-select2" name="element">
     <option value="empty">Выбор объёма</option>
     </select><div>
     </div></div></td>
     <td>
     <div id="label3">
     <select id="q3" class="sort-list-select3" name="element3">
     <option value="empty3">Выбор модели</option>
     </select>
     <div>
     </div></div></td>
     </tr>
     
     </tbody></table>
    </form>
    
    </div><br> 

    Файл ajax.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    
     <? CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 2, "ACTIVE_DATE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res = CIBlockSection::GetList(Array("sort" => "asc"), $arFilter, true);
     
     $arResult = "<select class=\"sort-list-select1\" name=\"element\" id=\"q2\" onchange=\"loadHTML('/structura/ajax1.php?id='+this.options[this.selectedIndex].value,'label3');\" >";
     $arResult .="<option value=\"empty\">Выбрать объём</option>";
     
     
     while($ob = $res->GetNextElement())
     {
     $arFields = $ob->GetFields();
     $arResult .= "<option value=".$arFields ['ID'].">".$arFields ['NAME']."</option>"; 
     }
     $arResult .="</select>"; 
    
    echo $arResult;
    
    
    ?>
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

    файл ajax1.php

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    
    
    
    <?CModule::IncludeModule("iblock");?>
    <?
    $IBLOCK_ID=8;
    
     $arSelect3 = Array("ID", "NAME","IBLOCK_SECTION_ID");
     $arFilter3 = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 3, "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y", "SECTION_ID"=>$_GET["id"]);
     $res3 = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter3, true);
     
     $arResult3 = "<select class=\"sort-list-select1\" name=\"element3\" onchange=\"window.location.href=this.options[this.selectedIndex].value\">";
     $arResult3 .="<option value=\"empty3\">Выбрать модель</option>";
     
     while($ob3 = $res3->GetNextElement())
     {
     $arFields3 = $ob3->GetFields();
    	 
     $arResult3 .= "<option value=".$arFields3 ['SECTION_PAGE_URL'].">".$arFields3 ['NAME']."</option>"; 
     }
     $arResult3 .="</select>"; 
    
    echo $arResult3;
    
    ?>
    
    
    
    
    
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>
  12. 26

    Привет. Спасибо за плагин, пользуюсь давно и очень доволен.
    Недавно написал модуль для друпала, который позволяет подключать твой плагин к любому сайту на этой CMS. Вот ссылка на него https://www.drupal.org/project/form_styler при установке модуля, плагин скачивается с твоего репозитория. Можешь в описании добавить ссылку на модуль. Настройки опций плагина из админки Drupal-а в работе. Выгружу как завершу и протестирую. Еще раз спасибо за плагин и свободную лицензию =)

  1. 1

    Недавно столкнулся с проблемой: часть страницы обновляется через ajax. Обновленные селекты без стилизации.
    Вроде понятно, что нужно вызвать метод .styler() повторно. Но вот как отловить момент обновления элемента. Сам механизм обновления через ajax заложен в CMS. Туда лезть нехорошо.
    В результате нашел довольно таки простое решение — прописать вызов метода в глобальных настройках ajax запросов:

    jQuery.ajaxSetup({complete: function(){jQuery("select").styler(); }}); 

    Может кому пригодится…

  2. 2
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  3. 3

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  4. 4

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  5. 5

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  6. 6
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  7. 7
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  8. 8

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  9. 9
    Фарит
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  10. 10

    Посмотрите, какой у вас общий родительский тег для этих инпутов, и укажите его в опции wrapper.

    Пример:

    <div class="radio-buttons">
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    </div>
    
    $('input:radio').styler({
    	wrapper: 'div.radio-buttons'
    })
    
  11. 11
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  12. 12

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });