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 603)

  1. Здравствуйте! Нужна помощь. Пытаюсь получить значение select’а через val(), в консоли выводится сначала значение, а потом undefined — http://take.ms/vwPqD
    Пробую получить текст выбранного option( $(this).children().filter(‘:selected’).text() ) — сначала получаю значение, а потом пустую строку — http://take.ms/utHtr
    Отключаю плагин и таких проблем не наблюдается. Подскажите пожалуйста в чем причина? Спасибо!

  2. Добрый день!

    Подскажите, пожалуйста, как сделать раскрытие списка select на hover, а не при клике(по умолчанию)

  3. Жаль input[type=range] нету (((

  4. здравствуйте! подскажите, пожалуйста, как правильно подключить formstyler в webpack?

    путь в пакете был указан неверно, так что я прописал алиас:

    'jquery-form-styler': 'jquery-form-styler/dist/jquery.formstyler.min.js'

    jquery сделан глобально через ProvidePlugin:

    new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
            }),

    ошибка: Uncaught TypeError: $fs.styler is not a function

    все прочие jquery-плагины работают нормально

  5. Привет. Использую форм стайлер для селектов, на айфоне при клике присваивается класс focused и на этом взаимодействие заканчивается, селект не открывается. В чем может быть причина, вижу я не первый кто с подобным столкнулся

    • Может кому пригодится, проблема была в том что я пытался изначально скрыть стандартный селект, что бы он не появлялся при загрузке страницы до обработки скриптом. Я делал display: none, а на iphone он как раз и отрабатывался, нужно делать opacity: 0 и все будет работать

  6. Руслан
    2 года назад

    Здравствуйте! Как при поиске по селекту сделать что бы группы не скрывались, если в группе есть хоть один подходящий результат? И как отключить поиск по названиям групп?

  7. Василий
    2 года назад

    Здравствуйте, как подключить плагин к Prestashop 1,6 стандартная тема? подключаю выкидывает ошибку:
    Failed to load resource: the server responded with a status of 404 (Not Found)

  8. Здравствуйте.
    У меня тупой вопрос: какие файлы плагина и куда загружать на сервере?
    Я загрузил два файла (jquery.formstyler.css и jquery.formstyler.min.js) из папки dist в папку jquery на сервере. И у меня ничего не работает.

  9. Подскажите что надо задать что-бы сократить текст в «option», как в «select» с точками?


  10. FixBugWithSelectFirstOptionForJqueryFormStyler(only for simple select).
    Cуть бага в том, что не плагин не позволял выбрать 1 элемент из выпадающего списка.

    Ловим все клики по элементам выпадающего списка:

    
    setTimeout(function(){
        
        $('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();
            }
        })
    },1000);
    
  11. Здравствуйте. При ограничении выпадающего списка селекта по высоте и прописания ему overflow-y: scroll, список опции не прокручивается колесом мыши, только за ползунок. Как-то можно изменить?

  12. Dimox, подскажите, почему select-ы не работают на мобильных устройствах? Даже у вас на демке если открыть в отладчике и обновить страницу — jq-selectbox__dropdown — всегда display:none

  13. Dimox, есть возможность обновить значение data-placeholder динамически? Пробовал разные варианты — не работает. Например:

    $("#js_get_obl").attr('data-placeholder',"новое значение").trigger('refresh');

    #js_get_obl — id селекта

    Что я неправильно делаю? Заранее спасибо.

  14. Dimox, добрый день. Подскажите пожалуйста, почему при установке Вашего плагина через npm подтягивается только версия 1.7.5, тогда как актуальная 2.0.1. Планируете ли вы актуализировать пакет в репозитории? Это было бы очень удобно, спасибо.

  15. Спасибо за полезный плагин!
    Скажите пожалуйста есть ли возможность у input type=»number» сделать так чтобы количество не уходило в минус?

  16. Здравствуйте. Этот плагин работает на девайсах? В эмуляторе браузера — селект не открывается. ошибки в консоле нет.

  17. Здравствуйте. Вопрос такой.
    Когда смотришь через эмулятор Google, то селект не открывается (display:block не ставится dropdown). Чтобы это увидеть, надо открыть эмулятор и страницу обновить.

    На iOS когда открываешь — отрабатывает стандартный селект системы. Можно ли как-то сделать так, чтобы открывался стилизованный?

  18. Привет, а как можно сделать добавить в селект чекбоксы или радио кнопки? я по разному пробовал и все никак не подучилось

  19. Привет, подскажите, как можно скрыть 1 элемент в селекте? что бы в выпадающем списке от не отображался , а в самом селекте был? http://joxi.ru/Rmz1EabhW7pkXr http://joxi.ru/v29a3EXSGX7v32

  20. Добрый день!
    Dimox, проверьте на странице с примерами «Селект с шириной 200 пикселей, имеющий пункт с длинным текстом» — это третий сверху пример:
    http://dimox.github.io/jQueryFormStyler/demo/#select
    Если кликать на самом селекте — все нормально, но если кликнуть справа от него, то появляется нативный выпадающий список.
    Как это побороть — к селектору «.jq-selectbox select» нужно добавить «width: 100%»
    По идее при абсолютном позиционировании достаточно было бы и того, что сейчас: left: 0; right: 0;
    Но получается, что без «width: 100%» селект вылазит за границы родительского блока.
    И огромнейшее спасибо за плагин!

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