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 601)
  1. 1
    Kos

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

    $(‘#add_position’).click (function() {
    var block = $(this).prev(‘.one_position’);
    block.clone().insertAfter(block);

    });

  2. 11
    Дмитрий

    Большой спасибо за плагин, пользуюсь уже несколько лет! На сегодня замечена только 1 проблема — селекты не раскрываются в safari на ios (просто ничего не происходит по нажатию на него). Есть ли решение этого?

  3. 17
    Aison

    Привет. есть возможность отключить плагин для определённого элемента. например для select включить, для multi-select выключить? также предлагаю добавить вот такую возможность https://www.jqueryscript.net/form/Select-Replacement-Plugin-jQuery-Selectator.html возможность мультивыбора в виде тегов.

  4. 20
    Aleksandr

    Появилась проблема на iPad в fancybox 3. Селект в датапикере юишном. Открываю селект, фокус переходит на первый инпут в попапе а сам селект закрывается и датапикер висит. такое только на яблоке. Что-то не могу понять в чем проблема

  5. 21
    overflow

    Новая версия в некоторых IOS вообще перестала работать (я про селекты). Раньше хотя бы без стилизации хоть как-то работало (стандартный список селекта для ios открывался)

  6. 22
    Иван

    Ребят подскажите как можно сделать подобного рода select или input пока еще не разобрался

    https://cdn.discordapp.com/attachments/371824836948787202/488988204033245186/demAnd_chart.png

  7. 23
    Игорь

    Добрый день! Проблема с селектом в модальном окне. когда вызываю модальное окно ни чего не работает. С этим как бороться? спасибо

  8. 25
    sm

    в select если включено поле поиска по списку, то не работает листание списка с клавиатуры (UP/DOWN). как можно исправить?

  9. 26
    Назар

    у меня такая ошибка http://prntscr.com/kwakip
    ни как не могу решить её, кто то может помочь?

  10. 27
    Олег

    Добрый день, мне понадобилось вывести более сложную структуру в

     <option>пункт</option>

    в виде

    <option><div><b>Что-то</b></div> - куда то <option> 

    не знаю как добавить скрин, так что временный http://prntscr.com/l2gdkk

    и это невозможно

    Но так получилось что на проекте уже был плагин и я немного немного модифицировал select

    <option class="тут специфичные классы с иконками" data-first="Что-то" data-last=" - куда то" >Что-то - куда то</option>

    получилось примерно так

    <select class="search_styler">
    <option class="" data-first="Что-то 1" data-last=" - куда то 1" >Что-то 1 - куда то 1</option>
    <option class="" data-first="Что-то 2" data-last=" - куда то 2"><b>Что-то 2 - куда то 2</b></option>
    <option class="" data-last="есть куда то 3, но нет чего...">Нет чего-то - но есть куда то 3</option>
    </select>

    и модифицировал jquery.formstyler
    примерно 550 строка — формирование псевдоселекта

    if (option.first().text() === '' &amp;&amp; option.first().is(':selected') &amp;&amp; selectPlaceholder !== false) {
    divText.text(selectPlaceholder).addClass('placeholder');
    } else {
    //start
     //если у select class="search_styler" 
     if(el.attr('class') == 'search_styler') {
     // найдем дата атрибуты и впихнем их в переменные textF (текстПервый) и textL (текстВторой)
     // если их нет, тогда false
     var textF = (el.find('option:selected').data('first')) ? el.find('option:selected').data('first') : false;
     var textL = (el.find('option:selected').data('last')) ? el.find('option:selected').data('last') : false;
     // если они у нас вообще есть, если нет, тогда стандартный вывод
     if(textF &amp;&amp; textL || textF || textL) {
     //второй текст у меня в любом случае будет, а вот первый нет
     // добавил проверку, что бы лишних <b> не висело, на сам <div> почему то не впихнул)))
     divText.html('<div><div>'+(textF != 0 ? '<b>'+textF+'</b>': '')+'</div> '+textL+'</div>')
     }else {
     divText.html(optionSelected.text());
     }
     }else {
     //стандартный вывод
     divText.html(optionSelected.text());
     }	
    //end				
    }
    

    примерно 820 строка — изменение селекта
    тут все тоже самое.

    el.on('change.styler', function() {
    //start
     if(el.attr('class') == 'search_styler') {
     var textF = (el.find('option:selected').data('first')) ? el.find('option:selected').data('first') : false;
     var textL = (el.find('option:selected').data('last')) ? el.find('option:selected').data('last') : false;
     
     if(textF &amp;&amp; textL || textF || textL) {
     divText.html('<div><div>'+(textF != 0 ? '<b>'+textF+'</b>': '')+'</div> '+textL+'</div>')
     }else {
     divText.html(option.filter(':selected').text()).removeClass('placeholder'); 
     }
     }else {
     divText.html(option.filter(':selected').text()).removeClass('placeholder'); 
     }
    //end
    li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
    if (option.first().text() != li.filter('.selected').text()) {
    selectbox.addClass('changed');
    } else {
    selectbox.removeClass('changed');
    }
    })

    Писал на коленке, так как сдавать проект. Мне этого хватило что бы удовлетворить заказчика.
    Может кому поможет

    ДЕЙСТВУЙТЕ НА СВОЙ СТРАХ И РИСК, ЕСЛИ НЕ ПОНИМАЕТЕ ЧТО ТУТ ТО НАЙДИТЕ ТОГО КТО ПОНИМАЕТ.

  11. 28
    Alexey

    Висит на checkbox обработчик
    если без плагина — то
    elem — собственно чекбокс

    $(elem).prop('checked') 

    в обработчике будет true

    если с плагином то будет false

    иными словами
    обычный чекбокс в момент обработчика клика — уже переключил свое состояние
    а плагин — нет
    что не очень приятно

  12. 29
    Ольга

    Так и не поняла как он работает с input[type=’number’] . Все подключила как в описании. Ничего не поменялось.

  13. 30
    Наталья

    Дмитрий, нужна ваша помощь.
    Пытаюсь реализовать адаптивные вкладки, которые на мобиле будут отображаться в виде стилизованного select (используя ваш скрипт конечно). Идея такая — на desktop отображаем обычные вкладки, на мобиле — вместо вкладок показываем select. Вкладки и select должны быть взаимосвязаны — при активной вкладке №3, select тоже должен отображать название вкладки №3 и наоборот.

    Мои действия:
    1. На просторах интернета взяла скрипт вкладок, которые уже привязаны к select и работает взаимосвязь.
    2. Подключила к select ваш скрипт. Демо — https://jsfiddle.net/moireceptik/q8uyhj7t/

    Проблема:
    Взаимосвязь вкладок и select пропала (если кликать по select — видно как активная вкладка меняется, а вот если кликать по вкладкам — select не меняется на нужный номер)!

    Нужно внести изменения в скрипт, чтобы вернуть взаимосвязь. Сможете помочь?

    PS. Наверняка такие адаптивные вкладки заинтересуют многих верстальщиков, но готового варианта (со стилизацией select) пока еще нет в инете, а он так необходим на сегодняшний день!

  14. 33
    Дмитрий

    Добрый день.
    Стилизовал select через плагин. Возник такой вопрос:
    Когда кликаю по селекту на мобиле iOS, происходит стандартное поведение выбора опций (карусель внизу) — все ок.
    Когда кликаю по селекту на мобиле Android, появляется стилизованный список (мне нужно попап окно с прокруткой, как при не стилизованном стелекте). Подскажите, как можно исправить?

  15. 34
    Дмитрий

    Добавил в jquery.formstyler.js после

    if (iOS) return;

    строку

    if (Android) return;

    При клике на селект на андроиде стилизованный список пропал, но нативный список так и не появился…Может есть какое решение, подскажите.

  16. 35
    Владимир

    Здравствуйте!
    На странице одиночный select с атрибутом data-search=»true». По выбору происходит перезагрузка страницы с учетом выбранного (фильтр ajax post).
    Так вот при выборе из списка элемента происходит перезагрузка страницы с указанной опцией из select. В консоле post выглядит так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20177%207181.
    Но если воспользоваться поиском по select и выбрать элемент, то post выглядит уже так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=0
    filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20374%203472
    .
    Т.е. при поиске он берет предыдущий выбранный пункт, соответсвенно фильтр не срабатывает на выбранный пункт. Это у меня такой глюк или так и должно быть?

  17. 36
    Andrew

    Всем привет! Вопрос такого плана.
    Использую jquery datepicker ui.
    Хочу закастомить селекты выбора месяца и года.
    У datepicker’а есть опция beforeShow тип которой функция с параметрами ( Element, Object ).
    В api datepicker’а написано примерно следующее:

    Функция, которая принимает поле ввода и текущий экземпляр datepicker, и возвращает объект параметров, с помощью которого можно обновить datepicker. Он вызывается непосредственно перед отображением даты.

    https://api.jqueryui.com/datepicker/#option-beforeShow

    Когда инициализирую datepicker, опции beforeShow передаю свою функцию dpSelectStyler
    Это выглядит следующим образом

    $(".default.datepicker-big").datepicker({
     showOn: "button",
     buttonImageOnly: false,
     dateFormat: 'mm.dd.yy',
     бла-бла-бла еще опции,
     beforeShow: dpSelectStyler
    });
    
    function dpSelectStyler(input, inst){
     console.log('dpSelectStyler');
     inst.dpDiv.find('select').styler();
    }
    

    Пробовал return inst.dpDiv.find(‘select’).styler();
    Пробовал эту функцию не выносить в отдельную и записать прямо после beforeShow:
    Результатов пока не добился. Не хватает JS скилла.
    Может кто сталкивался? В какую сторону смотреть?
    Спасибо!

    • 37
      Andrew

      На данный момент пришел к такому варианту, однако при смене месяца, из за новых инициализациий видно, как плагин разваливается, и собирается повторно.

      $(document).ready(function() {
       datePickerInit();
       var uiDatepickerDiv = $('#ui-datepicker-div');
      
       $(".ui-datepicker-trigger").on('click', function() {
       $(this).offset().top <= uiDatepickerDiv.offset().top ? uiDatepickerDiv.addClass('to-bottom').removeClass('to-top') : uiDatepickerDiv.addClass('to-up').removeClass('to-bottom');
       datePickerSelectStyler();
       });
      
       function datePickerSelectStyler() {
       $('#ui-datepicker-div select').styler();
       }
      
       function datePickerInit() {
       $(".default.datepicker-big").datepicker({
       showOn: "button",
       buttonText: "<svg class='svg-ico calendar-big'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='/frontfiles/img/svg/sprite.svg#ico-calendar'></use></svg>",
       changeMonth: true,
       changeYear: true,
       firstDay: 1,
       buttonImageOnly: false,
       dateFormat: 'mm.dd.yy',
       onSelect: function() {
       console.log('onSelect')
       datePickerSelectStyler();
       },
       onChangeMonthYear: function() {
       console.log('onChangeMonthYear')
       datePickerSelectStyler();
       setTimeout(function() {
       datePickerSelectStyler();
       }, 1)
       }
       });
       }
      });
      
  18. 38
    Prooksius

    Есть проблема с отображением контролов, если они изначально скрыты (к примеру в скрытой форме попапа, которая показывается после нажатия какой-то кнопки).
    Так вот, если вызывать активацию плагина для скрытых элементов, то скрипт неправильно считает их высоту. Используется jquery функция outerHeight(), которая при скрытых элементах возвращает 0. И в итоге имеем косяки со стилями выпадающих списков и мультиселект вообще нулевой высоты. Два часа искал причину..

  19. 40
    Евгений

    Здравствуйте. У меня такой вопрос:
    Есть несколько селектов и их нужно стилизовать по разному, возможно ли это реализовать?

  20. 42
    Виталий

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

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