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 126)
  1. 1
    Дмитрий

    http://refrigeratorua.github.io/GoITLib/Lesson_JS9_10/
    Только учусь. Если не тяжело, в чем проблема?

  2. 5
    Дмитрий

    в IE 11 при клике на чекбокс (сам квадрат) не ставится отметка. При это по лейбл отрабатывает нормально и снимается нормально

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

    Подскажите, всю голову сломал.
    Как прикрутить обработчик к форме input type=»number», а конкретнее к стрелкам +/-. для основного поля onChange великолепно работает. А для этих злосчастных кнопок — нет.

      • 9
        Александр

        Спасибо, что откликнулись. Честно говоря я полный 0 в jquery и javascript. Делаю корзину в интернет магазине. по замыслу дизайнера в корзине есть поле input type=number, по изменению которого, должна пересчитываться сама корзина сумма и количество. при изменении поля, я отправляю данные в скрипт onchange=»this.form.submit();». но у формы (input type=number) есть доп. кнопки для увеличения и уменьшения значений. После стилизации, событие onchange не применяется к форме.
        http://screencast.com/t/7c6a3N2z . Вот тут и встает вопрос какое событие нужно применить к данным кнопкам,или самой форме,что бы после использования именно данных кнопок, я мог отправить данные скрипту, без дополнительных действий,со стороны пользователя. (без стилизации событие onchange естественно работает для формы)

  4. 11
    Владимир

    Добрый день! Спасибо за плагин!!!
    Подскажите пожалуйста, дробные числа никак нельзя использовать в step=»»?
    Необходимо увеличивать шаг на 0.5

  5. 14
    Руслан

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

  6. 16
    c1n1k

    проблема со стилизацией и нестандартными шрифтами возникла и при подключении через стили, без google font, + setTimeout не помогает, можно как-то решить это?

  7. 18
    Данил

    Здравствуйте. Подскажите пожалуйста решение следующей проблемы.
    На этой странице http://test2.sagadegu.bget.ru/shop/BazaPelikan/LBT3417 используются два селекта. При выборе первого селекта теряется стилизация второго селекта.

    Спасибо

  8. 25
    Дима

    Дим, привет. Проверял работу на ios? Лично у меня из 3-х чекбоксов можно выбрать только один т.е. делается checked, а обратно в не checked уже не делается. Остальные тоже менять нельзя после того как один из чекбоксов чекнутый.

  9. 27
    Алина

    Добрый день!

    Спасибо за плагин, использовала в нескольких сайтах.
    но сейчас столкнулась с непредвиденным поведением select. Может вы о нем знаете и у вас уже есть решение…
    В моем случае селект находиться внизу страницы, в фиксированном блоке. в Мозиле все ок, раскрывающийся список внизу не помещается, и оно появляется сверху http://prntscr.com/b8k3aj
    а вот в хроме беда, он внизу и в область просмотра не помещается http://prntscr.com/b8kang
    Приходилось сталкиваться с такой проблемой? В чем может быть дело? и как это исправить?

  10. 31
    Дмитрий

    Добрый день.
    Не могу понять, почему не работает checkbox. Снимаю стилизацию — всё ок.
    Ситуация: при активном checkbox должно выводиться сообщение. Сейчас же при клике ничего не происходит.

    if ($(".nabor").prop("checked")) alert('aaa');

    refresh тоже не помогает.

    Подскажите, что нужно сделать?

  11. 33
    Максим

    Здравствуйте, не могу отключить плагин от checkbox, может что делаю неправильно, подскажите

  12. 35

    Дмитрий, добрый день!
    Не могли бы Вы подсказать, почему на странице моего сайта раскрывающийся список-меню раскрывается вверх? И как можно сделать, чтобы он раскрывался вниз. Когда пробую без стилей, открывается вниз.

  13. 38
    Олег

    Добрый день

    <select data-placeholder="Выберите пункт">
     <option value=""></option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
     <option value="4">Option 4</option>
     <option value="5">Option 5</option>
    </select>
    

    Вот в таком вариатне после выбора какого либо пункта нельзя сбросить селектор.
    Нельзя ли как то штатными средствами отображать в выпадающем списке первый пустой пункт?
    Просто добавить текст в option

    <option value="">Не задано</option>

    не подходит, так как оформлен он будет не так, как при отображении плейсхолдера. У вас даже тут в примерах отображение плейсхолдера отличается от отображния пунка «— Выберите —«

    • 39

      не подходит, так как оформлен он будет не так, как при отображении плейсхолдера

      Стилизуйте этот пункт через отдельный класс. Смотрите пример с иконками флагов в самом низу страницы примеров с селектами.

  14. 40
    Виктор

    Здравствуйте, а можно сделать при фильтре в select поиск по точному названию текста…
    Пример:
    есть два города Киев и Москва, при вводе буквы «К» — оставлять только Киев… ?
    P.S. очень полезное ваше решение, спасибо за труды…

  15. 42
    Олег

    Здравствуйте! Подскажите, пожалуйста, как реализовать такую возможность с вашим плагином:
    есть стилизованный селект, и необходимо сделать так, чтобы на него можно было повесить стандартный обработчик события change, не через jquery.
    Делаю это таким образом после инициализации селекта, не работает:

    document.querySelector(‘#select’).addEventListener(‘change’, function() {

  16. 44
    константин

    Вчера оставлял коммент, но походу не нажал отправить))
    В общем в ios не обновляется класс основного контейнера при изменении пункта у которого есть особенный класс. Я использую это для стилизации выбранного пункта, а так же для стилизации выпадающего списка, можете подсказать?))

  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');
    	}
    });