Главная JavaScript

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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 614)

  1. Добрый день, я прочитал что в недостатках стоит вызов нативного селекта по нажатию на клавишу вниз, можно ли как-то запретить вызов нативного селекта на кейборд?

  2. Здраствуйте, подскажите, работает ли плагин на планшетах и мобильных? Использовал ваш плагин для десктопной версии, дойдя до мобильного обнаружил, что при табе пальцом с мобильного — дропдаун не появляется, так же его нет в симуляции девайся через хром. Подскажите где искать решение, спасибо.

  3. Добрый день, столкнулся с проблемой: мне нужно чтоб ширина селектора была равна длине самого широкого поля option. Такой пример есть в примерах работы плагина (селектор без заданной ширины). Но когда я не задаю ширину селектора его ширина меняется в зависимости от выбранного пункта option, а не остается всегда равной самой большой длине.

  4. Здравствуйте! Возникла проблема test.cmski.ru/login/ поле чекбокса не правильно работает, и при клике на label тоже не работает, не могли бы Вы подсказать как это исправить?

  5. Здравствуйте, столкнулся с такой проблемой:
    В случае если селекты расположены в одном блоке горизонтально при клике на один селект открываются соседние с ним, имена у селектов и лэйблов разные
    В чем может быть причина?

  6. Здравствуйте! Как можно переинициализировать селект? Скажем по ajax меняется набор option.

  7. Здравствуйте! Подскажите, пожалуйста, возможно ли подключить селект с поиском на мобильный? На мобильном хорошо работает как селект, но при клике на поле не появляется клавиатура для ввода текста… Спасибо!

  8. подскажите как применить к полю для ввода чисел стиль, как показан в примере в разделе Другой вид переключателей.

  9. Добрый день! Как реализовать селект с анимацией? Мне нужно чтобы была анимация slideToggle.

  10. Не могу понять, почему у одиночного селекта выпадающие пункты перекрывают сам селект: http://joxi.ru/eAO4QPbux55ZDr. Стили для позиционирования jq-selectbox__dropdown прописываются в аттрибуте style. Как повлиять на них?

    • Без класса width-200 выпадающие пункты вообще ломаются: http://joxi.ru/EA4pPygswQQjXA

    • Никак не повлиять. Они формируются скриптом, т.к. могут меняться в зависимости от расположения селекта на экране. Возможно, что причина в каких-то стилях вашей страницы.

      • Спасибо за ответ!
        Использую UiKit фреймворк и селекты оказывается находились в вкладках и в модалке и изначально не были видны.
        Просто styler () не помог, пришлось уничтожать и снова создавать селекты при смене вкладки:

        	$("#settings-form").on("show", function() {
        		$('select').styler('destroy').styler();
        	});
        

        Визуально всё вроде бы работает, правда контент вкладок стал подгружаться через секунду (раньше было мгновенно), видимо после переинициализации всех селектов.

  11. Здравствуйте!
    Работаю с плагином почти год, за это время обнаружил несколько багов:
    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.

    • Главное не забыть, что в самом плагине необходимо убрать строку:

      Это не баг, это фича.

      Но лучше бы автор добавли опцию чтобы можно было выключать выпадающий список для мобильных устройств. Лично мне больше нравиться попап с выбором, на андроиде, чем выпадающий список.

  12. Когда я изменяю select box автоматическое не принимает option value. Как можно решить

  13. Как получить выбранное значение из select?

    $('.js-select.').val () — выдает пустоту

  14. При ховере на выпадающий список селекта блокируется прокрутка всей страницы. Можно ли как-то это отключить?

  15. Здравствуйте!
    столкнулась с багом, когда использую плагин во всплывающем окне (fancybox) — он добавляет прокрутку и нет возможности вытащить его с помощью z-index
    можно ли это как-то поправить?

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

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

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

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

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

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

Ваш комментарий