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

  1. Андрей
    3 года назад

    Доброе время суток! Не могу найти причину самостоятельно. Прошу помощи. Не работает селект в android Вот страница simferopol-aeroport-taxi.ru Там в окне «стоимость» 3 селекта и в таблице «тарифы» при узком разрешении тоже селект. Все как рыба об лед молчат.

  2. Приветствую!
    Первым делом благодарю за отличный плагин.

    Я хочу написать одну функцию которая будет и инициализировать стайлер, и тригерить «refresh» для переданного селекта.
    Вопрос как мне «правильно» определить что селект уже застилизован? Конечно можно проверить наличие специфического класса у элемента или его родителя, но хотелось бы более правильное решение, например проверка специального свойства.

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

    • Я и сам не знаю, как правильно, так как не особый специалист в JavaScript. Сделал бы так же, как вы и написали — через проверку класса.

      • Спасибо за ответ.
        Было бы неплохо присылать сообщение об ответе на указанную комментатором почту.
        Увидел ответ только благодаря тому, что вкладка была не закрыта при повторном заходе в браузер.

  3. Виталий
    3 года назад

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

  4. Почему так мало callbackов?
    Например, не хватает реакции на события — достижение конца списка, ввод строки поиска…

  5. Евгений
    3 года назад

    Подскажите пожалуйста, как на мобильных устройствах под андроид выключить выпадающий список который делает этот скрипт и использовать нативный?

  6. Константин
    3 года назад

    Такая проблема при стилизации селекта — http://prntscr.com/ff0p2k ширина блока выбранного элемента судя по всему задается js подскажите как можно сделать ее автоматической тоесть чтобы она зависела только от длины текста?

  7. Добрый день.

    Подскажите, пожалуйста, как можно пофиксить баг. Использую версию 1.7.8, возможности его сменить пока нет.
    Вот в чем баг:
    1) заходим сюда https://dimox.github.io/jQueryFormStyler/demo/#select
    2) через кнопку TAB нужно попасть на любое поле с select
    3) жмем пробел, чтобы раскрылся список и в нем появляются 2 одинаковых списка с разным размером. Причем при табуляции он проходит два списка.
    Баг актуален для FF.

    Как можно пофиксить, буду очень благодарен. Спасибо.

  8. Добрый день.

    Может еще кто знает как решить проблему, если ставить https://github.com/noraesae/perfect-scrollbar для страницы. В выпадающем списке появляется стандартный скролл и попробовать select листать при помощи клавиатуры, то плагин скролла перехватывает поведение, можно как нибудь эту проблему решить?

    Спасибо.

  9. Хотя посмотрел, глючит не за плагина perfect-scrollbar. Не могу понять из-за чего, может кто подскажет был ли такой глюк у кого нибудь.

  10. Добрый день, подскажите как реализовать следующее:
    В форме стоит чекбокс и ряд импутом, необходимо, что бы при активном чекбоксе, инпуты становились неактивными.
    пример кода

    <input class="checkbox" type="checkbox" name="name">
    <select type="text" name="name" id="when" required="" aria-required="true">
    <option value="#">Дата (на 2 дня)</option>
    <option value="#">Дата (на 3 дня)</option>
    <option value="#">Дата (на 4 дня)</option>
    </select>
    <select type="text" name="name" id="when" required="" aria-required="true">
    <option value="#">Время</option>
    <option value="#">10 : 00</option>
    <option value="#">10 :30</option>
    </select><blockquote></blockquote>
  11. Коллеги, прошу помощи в реализации плавной смены блоков, при клике по checkbox?
    Дано:
    страница формы, при загрузке активной должен быть блок
    checkbox Оформить доставку
    блок с классом ab-p__form-delivery—wrap

    при клике по checkbox Оформить доставку
    должен показываться блок с классом ab-p__form-delivery—wrap
    при клике по checkbox Самовывоз
    должен показываться блок с классом ab-p__form-pickup—wrap
    а блок ab-p__form-delivery—wrap скрываться

    пример кода
    https://jsfiddle.net/lebigan55/570mbnat/1/

  12. Не срабатывают события change для радио и чекбоксов, даже в примерах у вас не работает((
    http://jsfiddle.net/Dimox/ZB4sU/

  13. Какая-то проблема с multiple, по крайней мере я не смог его заставить работать

    <select multiple class="filter__select2">
  14. Как можно стилизовать селект , когда в нем нужно выделить в данном случае «10%» другим цветом, добавляю в option обвертку span, но она исчезает потом) как можно сделать так что бы выделить другим цветом конкретный текст?

    
                                <select name="" id="">
                                    <option value="">hotel + surfing <span>10%</span></option>
                                    <option value="">hotel</option>
                                    <option value="">surfing</option>
                                </select>
    
  15. Столкнулись с тем, что на ios не отрабатывает onSelectOpened — не сталкивались?

    • Прошу прощения, здравствуйте ))

    • Там он и не сработает, потому что в iOS выпадающий список плагином не открывается.

      • Dimox, подскажите как выйти из ситуации, у нас продакшн уже на завершающей стадии, сайт передали клиенту и этот баг вылез уже в самом конце. Как выйти из ситуации? Есть вариант адаптировать его для iOS?

        • Только искать альтернативный плагин.

          • Возможно кому-то будет полезно. Написал костыль, который проверяет userAgent и стилизует либо только select с iOS-устройств и select/option со всех остальных. Способ конечно кривой, но рабочий.

            
            if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
                        $form1.find("select, option").styler({
                            selectSmartPositioning: -1,
                            selectSearch: false,
                            selectVisibleOptions: 5
            });
            else {
                        $form1.find("select").styler({
                            selectSmartPositioning: -1,
                            selectSearch: false,
                            selectVisibleOptions: 5
            });
            

            Хотя ситуация крайне странная. Вы вроде писали что плагин не должен стилизовать селекты на iOS устройствах, но до определенного момента он работал. И все было гуд.

            • На iOS срабатывает нативный дродаун.

            • Вы вроде писали что плагин не должен стилизовать селекты на iOS устройствах

              Не так. Свернутый селект стилизуется, но не отображается выпадающий список из-за невозможности спрятать нативный.

              • Фишка в том, что на каком-то этапе продакшена он стилизовал дропдауны и работал на iOS устройствах корректно, но т.к. над проектом работал не один и сроки сильно поджимали не было времени разбираться в какой момент дд перестал работать, пришлось додумывать на лету. Противно, гадко самому, а что делать?

  16. Кажется, была возможность раньше указать, какое количество option можно показывать без скролла… Может как-то можно такое реализовать?

  17. Была бы полезной опция, задействующая сворачивание выпадающего списка select-а при отведении курсора.

  18. У плагина нет возможности какие-то элементы не стилизовать, например, скрытые элементы.
    Скрытый checkbox + label часто используется для огранизации адапативного меню без применения javascript, его стилизация разваливает такую верстку.

  19. Походу в новой версии проблемы с мультиселектом, так как и на странице демонстрации здесь мультиселект не работает

  20. Странно, включил на Андроид полную версию и всё норм ((

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