adminvps

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

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

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

    });

  2. 11
    Дмитрий

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

  3. 16
    Aison
    @

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

  4. 19
    Aleksandr
    @

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

  5. 20
    overflow

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

  6. 21
    Иван
    @

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

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

  7. 22
    Игорь
    @

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

  8. 24
    sm
    @

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

  9. 25
    Назар
    @

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

  10. 26
    Олег
    @

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

     <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. 27
    Alexey

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

    $(elem).prop('checked') 

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

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

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

  12. 28
    Ольга
    @

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

  13. 29
    Наталья
    @

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

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

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

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

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

  14. 32
    Дмитрий
    @

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

  15. 33
    Дмитрий
    @

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

    if (iOS) return;

    строку

    if (Android) return;

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

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