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»

Версия: 2.0.1 | Последнее обновление: 29.08.2017

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

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

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

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

    <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
    <link href="путь_к_файлу/jquery.formstyler.theme.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
    

    Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

  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
selectSmartPositioningtrueумное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
'-1' — позиционирование отключено
data-smart-positioning
localeruтекущая локаль
localesанглийская локализациямассив локалей с переводом соответствующих опций, подробнее смотрите здесь
к содержанию ↑

Колбеки (callbacks)

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

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

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

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales.

Пример локализации (английская по умолчанию включена в плагин):

$('input, select').styler({
	locale: 'en',
	locales: {
		'en': {
			filePlaceholder: 'No file selected',
			fileBrowse: 'Browse...',
			fileNumber: 'Selected files: %s',
			selectPlaceholder: 'Select...',
			selectSearchNotFound: 'No matches found',
			selectSearchPlaceholder: 'Search...'
		}
	},
});
к содержанию ↑

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. В таком случае рекомендую использовать решение из этой статьи.

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

Полезные комментарии (10)
Комментарии (2 473)
  1. 1
    Алексей

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

  2. 3
    Александр

    Здраствуйте, подскажите, работает ли плагин на планшетах и мобильных? Использовал ваш плагин для десктопной версии, дойдя до мобильного обнаружил, что при табе пальцом с мобильного — дропдаун не появляется, так же его нет в симуляции девайся через хром. Подскажите где искать решение, спасибо.

  3. 6
    Егор

    Добрый день, столкнулся с проблемой: мне нужно чтоб ширина селектора была равна длине самого широкого поля option. Такой пример есть в примерах работы плагина (селектор без заданной ширины). Но когда я не задаю ширину селектора его ширина меняется в зависимости от выбранного пункта option а не остается всегда равной самой большой длине.

  4. 8
    Максим

    Здравствуйте! Возникла проблема http://test.cmski.ru/login/ поле чекбокса не правильно работает, и при клике на label тоже не работает, не могли бы Вы подсказать как это исправить?

  5. 11
    Wrecker

    Здравствуйте, столкнулся с такой проблемой:
    В случае если селекты расположены в одном блоке горизонтально при клике на один селект открываются соседние с ним,имена у селектов и лэйблов разные
    В чем может быть причина?

  6. 15
    Ярослав

    Здравствуйте! Как можно переинициализировать селект? Скажем по ajax меняется набор option.

  7. 17
    Марина
    @

    Здравствуйте! Подскажите, пожалуйста, возможно ли подключить селект с поиском на мобильный? На мобильном хорошо работает как селект, но при клике на поле не появляется клавиатура для ввода текста… Спасибо!

  8. 19
    panfil3
    @

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

  9. 21
    Дмитрий
    @

    Добрый день! Как реализовать селект с анимацией? Мне нужно чтобы была анимация slideToggle.

  10. 23

    Не могу понять, почему у одиночного селекта выпадающие пункты перекрывают сам селект: http://joxi.ru/eAO4QPbux55ZDr . Стили для позиционирования jq-selectbox__dropdown прописываются в аттрибуте style. Как повлиять на них?

    • 24

      Без класса width-200 выпадающие пункты вообще ломаются: http://joxi.ru/EA4pPygswQQjXA

    • 25

      Никак не повлиять. Они формируются скриптом, т.к. могут меняться в зависимости от расположения селекта на экране. Возможно, что причина в каких-то стилях вашей страницы.

      • 26

        Спасибо за ответ!
        Использую UiKit фреймворк и селекты оказывается находились в вкладках и в модалке и изначально не были видны.
        Просто styler() не помог, пришлось уничтожать и снова создавать селекты при смене вкладки:

        	$("#settings-form").on("show", function() {
        		$('select').styler('destroy').styler();
        	});
        

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

  11. 27
    Gennadiy

    Здравствуйте!
    Работаю с плагином почти год, за это время обнаружил несколько багов:
    1) Иногда невозможно выбрать 1 элемент из выпадающего списка;
    2) При работе с android при клике на поле «Поиск…» вылазит android keyboard, которая закрывает select и он сворачивается;
    3) Плагин не работает на ios.

    Моё решение для версии плагина 1.7.6:

    //**********************************************************************************************************************
    //Fix JSF Bugs
    setTimeout(function(){
     /**
     * --------------------------------------------------------------------------------------
     * bug # 1 - суть бага в том, что не плагин не позволял выбрать 1 элемент из выпадающего списка
     */
     //ловим все клики по элементам выпадающего списка
     $('body').on('click', 'div.jq-selectbox__dropdown li.sel.selected', function (e) {
     e.preventDefault();
     //если элемент не выбрался, то выбираем его насильно
     if($(this).parents(':eq(2)').find('div.jq-selectbox__select div.jq-selectbox__select-text').is(':empty')){
     $(this).removeClass();
     $(this).click();
     }
     });
     /**
     * --------------------------------------------------------------------------------------
     * mobile bug # 2 - при клике на поле "поиск..." вверху списка, выскакивает android клавиатура,
     * которая закрывает собой список и он сворачивается в исходное положение.
     * Решение: удалить классы: dropdown, opened. И поднять список вверх, чтобы его не закрывала android клавиатура.
     */
     var search,submodal,modal,header;
     $('body').on('click', 'div.jq-selectbox.jqselect', function (e) {
     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     $(this).removeClass('opened');
     $(this).removeClass('dropdown');
     }
     });
     $('body').on('click', 'div.jq-selectbox.jqselect input[type=search]', function (e) {
     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     try{//обработка случаев в модальных окнах
     search = $(this);
     submodal = $(this).closest('.modal-body');
     modal = $(this).closest('.modal');
     header = $(this).closest('.modal-content').find('.modal-header');
     var currentSelectPosition = $(this).parents().eq(2).offset().top;
     var currentScrollPosition = $(this).closest('.modal-body').scrollTop();
     var currentModalScrollPosition = $(this).closest('.modal').scrollTop();
     var currentHeaderPosition = $(this).closest('.modal-content').find('.modal-header').offset().top;
     var needDistance = currentScrollPosition + (currentSelectPosition - currentHeaderPosition) - currentModalScrollPosition;
     submodal.scrollTop(needDistance);
     //для случая когда scroll modal-body прокручен до максимума и тогда нужно прокрутить еще scroll modal
     if(submodal.scrollTop() < needDistance &amp;&amp; modal.scrollTop() != ( needDistance - submodal.scrollTop() )){
     modal.scrollTop( modal.scrollTop() + ( needDistance - submodal.scrollTop() ) )
     }
     }catch(e){//обработка случаев на обычной странице(html, body) - обрабатывается автоматически плагином
     //$('html, body').scrollTop(currentSelectPosition - 70);
     }
     setDownDropdownListForJFS($(this).parents().eq(1));
     }
     });
     function setDownDropdownListForJFS(target){
     if($(target).css('bottom') != 'auto'){
     $(target).css('bottom','auto');
     $(target).css('top','27px');
     }
     }
     /**
     * --------------------------------------------------------------------------------------
     * mobile bug # 3 - суть бага в том, что не плагин не работает на ios, и вместо него видим ios native drop down.
     * Решение: деактивация фокуса на select, что приводит к закрытию ios native drop down.
     * Важно: в самом плагине необходимо убрать строку - "if (iOS) return;", которая блокирует работу плагина для ios.
     */
     $('body').on('focus', 'select', function (e) {
     if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
     if($(this).parent().hasClass("jq-selectbox") &amp;&amp; $(this).parent().hasClass("jqselect")){
     $(this).blur();
     }
     }
     });
    },5000);
    //**********************************************************************************************************************
    

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

    if (iOS) return;

    которая блокирует работу плагина для ios.

    • 28
      Alex
      @

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

      Это не баг, это фича.

      Но лучше бы автор добавли опцию чтобы можно было выключать выпадающий список для мобильных устройств. Лично мне больше нравиться попап с выбором, на андроиде, чем выпадающий список.

  12. 29
    Саламат

    Когда я изменяю select box автоматическое не принимает option value.Как можно решить

  13. 31
    pwnz22

    Как получить выбранное значение из select?

    $(‘.js-select.’).val() — выдает пустоту

  14. 33
    Cheg
    @

    При ховере на выпадающий список селекта блокируется прокрутка всей страницы. Можно ли как-то это отключить?

  15. 36
    Варвара
    @

    Здравствуйте!
    столкнулась с багом, когда использую плагин во всплывающем окне (fancybox) — он добавляет прокрутку и нет возможности вытащить его с помощью z-index
    можно ли это как то поправить?

  1. 1
    Роман

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

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

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

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

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

  3. 3

    Можно.

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

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

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

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

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

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

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

  7. 7

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

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    @
    		(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, стилезуйте на свой вкус.

  9. 9
    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.

  10. 10

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

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий