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

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...

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

    Доброе время суток! Не могу найти причину самостоятельно. Прошу помощи. Не работает селект в android Вот страница simferopol-aeroport-taxi.ru Там в окне «стоимость» 3 селекта и в таблице «тарифы» при узком разрешении тоже селект. Все как рыба об лед молчат.

  2. 4
    Антон

    Приветствую!
    Первым делом благодарю за отличный плагин.

    Я хочу написать одну функцию которая будет и инициализировать стайлер, и тригерить «refresh» для переданного селекта.
    Вопрос как мне «правильно» определить что селект уже застилизован? Конечно можно проверить наличие специфического класса у элемента или его родителя, но хотелось бы более правильное решение, например проверка специального свойства.

    Пояснение причин. У меня есть динамически переключаемые табы. При инициализации я стилизую селект, но в тот момент вкладка с ним скрыта и естественно применяются некорректные размеры дропдауна.

  3. 7
    Виталий
    @

    Здравствуйте.
    Можно реализовать мультиселект, который ведет себя как обычный селект (сначала скрыт, а при клике раскрывается), но можно выбрать несколько пунктов в нем?

  4. 9
    Бака

    Почему так мало callbackов?
    Например, не хватает реакции на события — достижение конца списка, ввод строки поиска…

  5. 11
    Евгений

    Подскажите пожалуйста, как на мобильных устройствах под андроид выключить выпадающий список который делает этот скрипт и использовать нативный?

  6. 13
    Константин
    @

    Такая проблема при стилизации селекта — http://prntscr.com/ff0p2k ширина блока выбранного элемента судя по всему задается js подскажите как можно сделать ее автоматической тоесть чтобы она зависела только от длины текста?

  7. 15
    Serg

    Добрый день.

    Подскажите, пожалуйста, как можно пофиксить баг. Использую версию 1.7.8, возможности его сменить пока нет.
    Вот в чем баг:
    1) заходим сюда https://dimox.github.io/jQueryFormStyler/demo/#select
    2) через кнопку TAB нужно попасть на любое поле с select
    3) жмем пробел, чтобы раскрылся список и в нем появляются 2 одинаковых списка с разным размером. Причем при табуляции он проходит два списка.
    Баг актуален для FF.

    Как можно пофиксить, буду очень благодарен. Спасибо.

  8. 20
    Serg

    Добрый день.

    Может еще кто знает как решить проблему, если ставить https://github.com/noraesae/perfect-scrollbar для страницы. В выпадающем списке появляется стандартный скролл и попробовать select листать при помощи клавиатуры, то плагин скролла перехватывает поведение, можно как нибудь эту проблему решить?

    Спасибо.

  9. 23
    Serg

    Хотя посмотрел, глючит не за плагина perfect-scrollbar. Не могу понять из-за чего, может кто подскажет был ли такой глюк у кого нибудь.

  10. 24
    Игорь
    @

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

    <input class="checkbox" type="checkbox" name="name">
    <select type="text" name="name" id="when" required="" aria-required="true">
    <option value="#">Дата (на 2 дня)</option>
    <option value="#">Дата (на 3 дня)</option>
    <option value="#">Дата (на 4 дня)</option>
    </select>
    <select type="text" name="name" id="when" required="" aria-required="true">
    <option value="#">Время</option>
    <option value="#">10 : 00</option>
    <option value="#">10 :30</option>
    </select><blockquote></blockquote>
  11. 29
    Игорь
    @

    Коллеги, прошу помощи в реализации плавной смены блоков, при клике по checkbox?
    Дано:
    страница формы, при загрузке активной должен быть блок
    checkbox Оформить доставку
    блок с классом ab-p__form-delivery—wrap

    при клике по checkbox Оформить доставку
    должен показываться блок с классом ab-p__form-delivery—wrap
    при клике по checkbox Самовывоз
    должен показываться блок с классом ab-p__form-pickup—wrap
    а блок ab-p__form-delivery—wrap скрываться

    пример кода
    https://jsfiddle.net/lebigan55/570mbnat/1/

  12. 30
    Артём

    Не срабатывают события change для радио и чекбоксов, даже в примерах у вас не работает((
    http://jsfiddle.net/Dimox/ZB4sU/

  13. 32
    Антон

    Какая-то проблема с multiple, по крайней мере я не смог его заставить работать

    <select multiple class="filter__select2">
  14. 34
    Артем

    Как можно стилизовать селект , когда в нем нужно выделить в данном случае «10%» другим цветом, добавляю в option обвертку span, но она исчезает потом) как можно сделать так что бы выделить другим цветом конкретный текст?

     <select name="" id="">
     <option value="">hotel + surfing <span>10%</span></option>
     <option value="">hotel</option>
     <option value="">surfing</option>
     </select>
    
  15. 36
    Дмитрий

    Столкнулись с тем, что на ios не отрабатывает onSelectOpened — не сталкивались?

  16. 45
    Виталий
    @

    Кажется, была возможность раньше указать, какое количество option можно показывать без скролла… Может как-то можно такое реализовать?

  17. 48
    Артур

    Была бы полезной опция, задействующая сворачивание выпадающего списка select-а при отведении курсора.

  18. 49
    Сергей
    @

    У плагина нет возможности какие-то элементы не стилизовать, например, скрытые элементы.
    Скрытый checkbox + label часто используется для огранизации адапативного меню без применения javascript, его стилизация разваливает такую верстку.

  19. 53

    Походу в новой версии проблемы с мультиселектом, так как и на странице демонстрации здесь мультиселект не работает

  20. 56

    Странно, включил на Андроид полную версию и всё норм ((

  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');
    	}
    });
    
Ваш комментарий