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 583)
  1. 1
    fatemax
    @

    Здравствуйте.
    Есть такая конструкция

    <option id="set2" value="#map_block" onClick="setCenter2()" data-chained="Almetevsk">Нефтяников, 37</option>

    Однако, после применения стайлера, данный пункт списка перестает работать.
    Как неоднократно писали в комментариях нужно onClick заменить на onChange, но эффекта никакого это не дало.
    Я что-то делаю не так? Как заставить отрабатывать стилизованные пункты выпадающего списка?

  2. 7
    Артем

    Здравствуйте. Подскажите пожалуйста, а как можно реализовать select сразу с input search, чтобы по клику на него выпадал список всех option’s. Вообщем, сделать такой select, только без стандартного блока selectbox__select и за место него input search с поиском по option’s.

    Пример https://ibb.co/kZoBen

  3. 9
    fatemax
    @

    Возможно ли видоизменить текст получаемый из option? Есть ли возможность, например, изменить цвет только части текста, или расстановка переносов строки в тегах ?

      • 11
        fatemax
        @

        Стал думать в сторону модификации уже выведенного на страницу текста посредством JS-скрипта. Не могу понять, как происходит сопоставление сформированных li-блоков и options исходного селекта. То есть подменив ul — li сформированные Вашим скриптом на ul — li — элементы включающие, например теги:

        <i></i> или </br>

        теряется связь c options ( если не связь, то, скажем так, клик по новому li не приводит к клику по options который обрабатывается onchange).
        Подскажите в какую сторону копать?

  4. 12
    Вениамин

    Как сделать drop_up наверх у простого селекта. Я просто тупой не могу разобраться. Что и где нужно дописать?

  5. 14
    @

    К сожалению на днях, перестал работать одиночный селект на IOS, а точнее на Safari. Возможно подскажите решение?

    Проверял у себя на сайте и у вас на демо, с телефона и Chrome на ПК в режиме адаптивного дизайна под iPhone/iPad

  6. 22
    fatemax
    @

    Замечено, что не работает при использовании .trigger(‘refresh’), а без — мультиселект стилизуется.

  7. 26
    Никита

    А есть какой то способ сделать на андроиде нативный выпадающий список, так же как на ios барабан появляется, при нажатии на стилизованный select?

  8. 27
    Андрей

    Подскажите, как быть если у тебя на странице два селекта, и у каждого свои стили.
    Простая конструкция $(‘select’).styler(); тут определенно не поможет. Надо что то добавить. Что?

  9. 32
    Nik_Dev
    @

    Здравствуйте.
    Подскажите пожалуйста в чем может быть проблема.
    У меня есть скрипт, который заносит сумму в поле input при выборе option в select.
    При стилизации вашим select перестает работать.

    https://webchikof.com
    На сайте нажмите на кнопку «рассчитать стоимость сайта».
    Заранее благодарю )

  10. 35
    Никита

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

  11. 37
    @

    Вот написал точно такое же на нативном JS. Обратил внимание, что браузер не желает отображать текущее состояние свойств checked, selected. То есть console.log( element.checked ) и console.log(element.selected) не выводит актуального состояния bool значения. Попутно загемороился с одиночным атрибутом, если указано не по системе Strict HTML, где надо прописывать атрибут selected=»selected». Собственно, я думал, что jQuery говно и баг в ней. Написал на чистом JS — баг тот же. Но jQuery все равно говно. У нее в циклах вечно параша с функциями при переборке.

    Dimox, ты на каком браузере работаешь с версткой?

  12. 39
    Александр

    Подскажите, при включении опции multiple у select они скрываются. Как продиагностировать, что не так?

  13. 49
    Наталья

    Добрый день! Я в jquery не сильна, но очень нужно реализовать вот это:
    Есть вот такая конструкция — https://jsfiddle.net/moireceptik/hp27xrdb/
    Задача: При выборе категории — выделить все подкатегории только у выбранной категории
    Сейчас я использовала ваш скрипт http://jsfiddle.net/Dimox/KgeSA/, но при выборе Категории № 1, отмечаются галочки абсолютно у всех категорий и подкатегорий. Что не правильно для моей задачи.
    Предполагаю что тут нужно использовать (this), но как и куда его вставить — это выше моего понимания.

  14. 53
    Максим
    @

    Наверное не совсем к Вам, но

    Страница https://v-gorod.com/_v/
    Браузеры — webkit для мобильных устройств

    http://prntscr.com/jx0r5z -> http://prntscr.com/jx0rdf — Не работает

    Меняем ориентацию http://prntscr.com/jx0rjw — работает

    Экспериментальным путем выяснил, что работоспособность зависит от положения относительно края браузера (устройства)

  15. 55
    Павел

    Будут ли обновление плагина или автор забросил проект?

  16. 59
    CyberX
    @

    Dimox, а че так редко пишешь? Может хоть за ноду упорешься? Там новые прослушки есть… Скучно, почитать некого стало. Все мозги растеклись… Даже над беспантовыми сеошниками уже не поржать даже. Соскакивай с jQuery ;)

  17. 60
    Сергей

    Как стилизовать стрелку у селекта.
    Я использовал font-awesome

    .jq-selectbox__trigger-arrow {
     top: 7px;
     width: 20px;
     height: 20px;
     font-size: 30px;
     border: none;
    
     &amp;::before {
     content: '\f107';
     font-family: 'FontAwesome';
     }
     }
    

    А как изменить при закрытии на стрелку в верх?

  18. 63
    Aleks

    Не работает выпадающий список, если зайти с Iphone, можно глянуть через dev tools на странице примеров

  19. 65
    Виталий

    долго бились, но так и не можем понять почему не работают селекты в iOS
    https://gruzovoy.ru/
    https://gruzovoy.ru/catalog
    не посмотрите, в чем может быть дело?

  20. 67
    @

    Приветствую автора. Хороший плагин, но не хочет работать на iphone и в хроме при имитации iphone в панели разработчика. Есть ли способ это решить? Спасибо.

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