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 357)
  1. 1
    Николай

    Помогите, пожалуйста! Как в тег option добавить иконку перед текстом? Если поставить background или :before на тег li, то работает, но у выбранного пункта иконка не меняется…

  2. 4
    Андрей

    Я дико извиняюсь, но я не поняk как прикрутить свои стили XD

  3. 6
    Евгений

    Помогите!! Не могу разобраться, как сделать чтоб изначально select был раскрыт!?

  4. 8
    Анна

    Даже на примере не работает кнопка сброса: http://dimox.github.io/jQueryFormStyler/demo/#css
    Хотя заявлено как достоинство, уберите и добавьте в недостатки или почините, пожалуйста.

  5. 12
    Анна

    Тестила у себя тоже самое…

  6. 13

    Почему при выборе чего то из списка, он не сохраняет что выбрано?

    Выбираю 100, применяю, при фильтрации сразу выводит в место того что выбрано, ставить Выберите число. Отключаю скрипт все работает!

    Пример в поле адрес блога.

    <select>Выберите число</select>
    <select>100</select>
    <select>200</select>
    <select>300</select>
    
  7. 14
    Александр

    Приветствую.
    IE 11 неправильно формирует ширину блока с текстом (в нормальных браузерах все норм). Есть какие-то наработки под рукой, как это победить?
    http://saveimg.ru/pictures/13-02-17/bed0a4b4caa7a85d9feba647caf3ecc4.png

  8. 16
    Роман

    Здравствуйте. Я отображаю с помощью placeholder название селекта. На ПК и Android нормально, а вот на iOS первый option (который пустой) тоже отображается. Есть ли решение данной проблемы? Или может есть возможность отображать стилизированный select и на iOS?

  9. 18
    Антон

    Добрый день, подскажите как отключить авто height в дропдауне селект, выподает список с автовысотой и появляется прокрутка, я хочу отключить это.

  10. 22

    Добрый день.
    Как побороть такую ситуацию, даже на демке:

    1. На странице примеров поле выбора файла http://dimox.github.io/jQueryFormStyler/demo/#file
    2. Выбираешь файл, появляется имя файла.
    3. Нажимаешь кнопку «Переключить активность», все поля становятся неактивными и везде написано «Файл не выбран»
    4. Нажимаешь кнопку опять «Переключить активность», все поля активируется, но также надписи «Файл не выбран» (хотя судя по всему данные о файле в инпуте сохранились).
    5. Если в поле, где раньше был выбран файл выбираешь тот же самый файл, что и до деактивации, то в поле ничего не меняется, также написано «Файл не выбран».

    Видимо не обновляется в файловом инпуте данные о том, что либо он очищен, либо что в нем есть после сброса какой-то файл добавленный ранее.

  11. 24
    Рома

    Здравствуйте — подскажите пожалуйста как сбросить значение input type = «checkbox» ?

    если использую этот код без плагина то все работает:

    $('#res_checbox').click(function() {
    	console.log("hola datevid");
    	$('.filtr_box_item input:checked').prop('checked', false);
    	if ($('.filtr_box_item input:checked').is(':checked')) {
    		console.log("App");
    	} else {
    		console.log("No App");
    	}
    });

    но если подключаю плагин то нет …

    если я чего-то не нашел в документации прошу подсказать.

  12. 27

    Здравствуйте. Есть проблема. Если использован атрибут дата таким образом — data-value-id, то скрипт отобразит его как data-valueid, т.е. обрежет второй —

  13. 29
    Натали

    Подскажите пожалуйста как использовать .jq-selectbox .placeholder? Не могу убрать пункт [ — Все -]

  14. 31
    Timur

    Не могу подключить плагин через require. Возвращает undefined

    require('jquery-form-styler')

    Как решить проблему?

  15. 33
    Алла

    Скрипт классный, но, к сожалению, конфликтует с https://github.com/RobinHerbots/Inputmask на iphone(( Не могли бы вы проверить почему так происходит? Пожаааалуйста))

  16. 34
    Noir

    Подключил версию 1.7.8 с jQuery 3.2.1. Наблюдаю странный глюк селекта, который находится в модальном окне fancybox 3 c iframe со стандартными параметрами и прелоадингом.
    Без дополнительных опций список выпадает только вверх, хотя вниз свободного места больше. Выпадает со скроллом (в моем случае видимы 3 опции), и не уходит за пределы iframe.
    При опции data-smart-positioning=»false» список выпадает вниз. Но data-visible-options работает, только если выставить его меньше 5. Если ставлю 5 или больше — почему-то выпадает весь список без скролла, уходящий вниз за пределы iframe.
    При опции data-smart-positioning=»-1″ data-visible-options работает нормально.
    Просто на странице селекты работают без глюков с любыми опциями.

  17. 36
    Noir

    Да я и не прошу что-то сделать. Это не критично — просто мелкое неудобство. Комбинацией опций Вашего плагина и модального окна получил приемлемый результат, тем более — это в админке, красота не особо важна. Просто заметил, и написал — вдруг это Вам поможет в дальнейшем усовершенствовании плагина. Мне самому интересно стало, почему data-visible-options в этой ситуации при значениях от 1 до 4 работал, а при 5 и выше — нет. Но читать внимательно Ваш исходник пока времени не было.

  18. 37
    Александо

    На айфоне и компьютере в Safari select не работает, у вас так же или проблема только у меня и в чем может быть причина? Заранее спасибо!

  19. 39
    Юрий

    Здравствуйте.
    Наблюдаю такой глюк. Установил на шаблон вордпресс + woocommerce
    В карточке товара при выборе параметра (вариантивный товар) не меняется цена.
    Причина точно в jQuery Form Styler (без него все работает корректно)
    Очень не хотелось бы переделывать.
    В чем может быть глюк?
    Сайт http://drvape.az

  20. 41
    Андрей

    Здравствуйте! Не устану повторять, насколько нравится мне Ваш плагин. Интересует такой вопрос по селекту с поиском. Предположим, я через jquery добавляю свой элемент в div.jq-selectbox__search. По клику на нем я хочу чистить input поиска. Используя $(‘input’).val(»») поле очищается, но не возвращаются изначальные значения списка. Подскажите в какую сторону смотреть.

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