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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Плагин «jQuery Form Styler» Подключение плагина ...

Полезные комментарии (10)
Комментарии (2 531)
  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. Как повлиять на них?

  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
    можно ли это как то поправить?

  16. 37
    Влад

    Пытаюсь стилизовать селекты в кверевском datapicker-е (год и месяц)
    Но что-то или я путаю или все несколько хитрее
    Но в результате с первого клика datapicker не отображается, надо расфокусировать инпут и уже тогда после клика отображается datapicker со стилизованными селектами

    $(function () {
     $(".date-box").click(function(e) {
    	e.preventDefault();
     $("#datepicker").datepicker({
     changeMonth: true,
     changeYear: true,
     showOtherMonths: true,
     selectOtherMonths: true
     });
     $('select').styler();
     })
    });
    
  17. 41
    Константин

    Переделайте мультиселект как у бутстрапа и цены вашему плагину не будет http://silviomoreto.github.io/bootstrap-select/examples/

  18. 42
    Nik_Dev
    @

    Добрый день.
    А как сделать, чтобы select применялся только к определенному select?
    То есть, чтобы не все select менялись, а только 1.

  19. 47
    NonSolus

    Добрый день, а как можно открыть select при фокусе?
    то есть при переходе по input’ам, по нажатию на Tab, при попадании на select он раскрывался

  20. 49

    Как сделать открытие списка только вверх?

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