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

  1. Подскажите, как правильно реализовать select All для множества чекбоксов. Я использую такой скрипт(пишу в CoffeeScript, думаю будет понятно):

    
      $('#select_all-styler').click ->
        if $(this).hasClass 'checked'
          $('.bulk_actors').each ->
            $(this).addClass 'checked'
        else
          $('.bulk_actors').each ->
            $(this).removeClass 'checked'
    

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

  2. есть возможность передавать в options например спан и он отображался так же и в li , dropdowne?

    например EDT — Current Location 6:02 PM
    и это выглядело как EDT — Current Location 6:02 PM

  3. Сдфвшьшк
    6 лет назад

    Пожелания для автора.
    1) Уберите из кода инлайн стили и пропишите их в css.
    2) В выпадающем блоке добавьте обертывающий див для списка и выставляйте для него min-height. Это нужно для подключения плагина стилизации скролбара.
    3) Допишите для ul и li классы по бэму «.jq-selectbox__list» и «.jq-selectbox__item» например.
    4) Добавить колбеки на событие инициализации селекта, изменения размера выпадающей часи(на всякий случай), обновления и на destroy.

  4. Ещё один недостаток: в Андроиде не работает «умное позиционирование» и не работает ограничение по высоте для селектов

    • Про позиционирование подтверждаю. Только вряд ли смогу что-то с этим сделать. А ограничение по высоте у меня работает.

  5. Евгений
    6 лет назад

    Здравствуйте, а можно ли, например, к .jq-checkbox__div, добавить свой класс? Обычно для чекбоксов использую галочку. Сейчас чтобы не нарезать картинки, обычно использую fontawesome.

  6. Пожелание: добавьте префик\суффикс к классу dropdown, может пересекаться с другими элементами с этим классом

  7. Дмитрий
    6 лет назад

    Здравствуйте.

    Подскажите, есть ли возможность выставлять в селектах вместо начального значения «выберите» значение из тега option с атрибутом selected?

  8. Приветствую!
    Не могу понять в чем дело — при использовании плагина для радиокнопок (input type=»radio»), если мы выбрали одну из радиокнопок, при нажатии на вторую не убирается класс checked у первой выбраной и соответственно обе кнопки остаются подсвеченными.

  9. Дополнение к предыдущему комментарию (не убирается класс checked у радиокнопок) http://test.forweb52.ru/test/

  10. Здравствуйте. При открытии одного select, а затем другого(который находится выше) получается вот так https://monosnap.com/file/6cOQcZA1f97TJTjKAJA7PW4Kb5fm8d.png

    Возможно есть какое-нибудь решение проблемы?

    • Покажите живой пример. На странице примеров плагина можно увидеть, что там с этим все в порядке, поэтому предполагаю, что причина в ваших стилях.

  11. Решение для jScrollPane плохо работает с вашим скриптом. Мешает строка, запрещающая скролить список колёсиком. Закоментировав её, я избавился от проблемы. Но она обычно не добавляется просто так. Это можно как-то решить по-хорошему?

  12. Подскажите как программно сбросить Select (выпадающий список)?

  13. Столкнулась с проблемой у селекта в андройде не рабоатет скрол дропдауна. У других заметила список как и на ios системный выдаётся,а в данном плагине нет, из за этого очень серёзный баг. Как можно исправить?

  14. На последней версии на iphone не работает select

  15. У меня форма находится в теге fieldset и select когда раскрываешь не видно нижних строк а при прокрутке все равно до низа не доходит и вследтсвии не возможно выбрать строки, каким образом сделать список поверх всех, пробовал добавить z-index не помогло?

  16. Использовал Ваш плагин предыдущей версии. За ненадобностью выпилит из него все кроме селекта.
    Сам селект тоже пришлось допиливать.
    Сделал соже что и писал «Сдфвшьшк» в посте выше.
    1) Добавлял поддержку для телефонов. В текущей версии она есть, но не очень хорошая. Сделайте пожалуйста для Android и iOS чтобы открывался нативный селект(у вас почемуто только для iOS).
    2) сделать мультиселект так же выпадающим.(хотябы опцией).
    3) Можно сделать опцию для того чтоб при клике на optgroup выбирались все опшены в мультиселекте.

  17. Тег select не закрывается после выбора из выпадающего списка. Приходится либо закрывать самому, кликая где-нибудь в другом месте, либо выбирать выпадающий пункт двойным щелчком. Не подскажете как исправить?

  18. Дважды вызывается change если (элемент обёрнут в label) && (вызывается trigger(‘refresh’))
    http://jsfiddle.net/0xzjv3ho/

  19. День добрый!
    Было бы удобно, если при клике на select фокус будет сразу на поле поиска (при его наличии конечно).

  20. Игорь Фёдоров
    5 лет 10 месяцев назад

    Привет! У меня случился странный баг: радиокнопки выбираются все. Атрибуты name прописал одинаковые, но при этом класс checked не убирается при клике на другую кнопку. Что бы это могло быть?

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