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 263)
  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>

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

  14. 40
    Виктор

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

  15. 42
    Олег

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

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

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

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

  17. 47
    Руслан

    Здравствуйте! Не срабатывает метод destroy.

    $("select").styler();
    $(".button").click(function(){
    $("select").styler("destroy");
    });
    
  18. 49
    Виктория

    Подскажите, пожалуйста, можно ли как-то модифицировать библиотеку, чтоб под ios открывался селект как под десктоп? Не могу понять, почему подставляется нативный select. Под android-телефоном все как на десктопе.

  19. 51
    Виктория

    У меня получилось срыть нативный селект на ios=) и очень просто. Добавьте стиль
    .jq-selectbox select {
    display: none !important;
    }
    Проверено на ios 9.3.2 в хроме и сафари.
    Спасибо!

  20. 52
    Борис

    Добрый день!
    Поправьте, пожалуйста, bower.json в репозитарии GitHub’a, почему-то там «name»: «jquery-form-styler», в то время как сам bower знает ваш плагин под именем «jquery.form-styler».
    Такие вот дела:)

    P.S. Вообще считаю идеальным, когда имя репозитария, имя пакета и имя пакета в пакетных менеджерах одно и тоже… а, то пока не нагуглишь не разберешься%)

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