Главная › JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

2614 комментариев

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-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

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

  1. Дмитрий
    7 лет 4 месяца назад

    refrigeratorua.github.io/GoITLib/Lesson_JS910/
    Только учусь. Если не тяжело, в чем проблема?

    • константин
      7 лет 3 месяца назад / ответ на коммент Дмитрий

      Добрый день.
      Используем ваш плагин в своем проекте, возникла проблема, мы стилизуем все позиции списка select, решение выбрали самое простое чтобы не модифицировать плагин, т. е. для каждого option добавляем свой класс, соответвственно и выпадающий список и выбранная позиция идеально работает, но вот на iOS планшете после изменения значения списка стиль не подтягивается в основной контейнер, а остается старый от дефолтного значения.
      Не подскажете как решить проблему?

  2. Дмитрий
    7 лет 4 месяца назад

    в IE 11 при клике на чекбокс (сам квадрат) не ставится отметка. При это по лейбл отрабатывает нормально и снимается нормально

  3. Александр
    7 лет 4 месяца назад

    Подскажите, всю голову сломал.
    Как прикрутить обработчик к форме input type="number", а конкретнее к стрелкам +/-. для основного поля onChange великолепно работает. А для этих злосчастных кнопок — нет.

    • Dimox
      7 лет 4 месяца назад / ответ на коммент Александр

      Не совсем понимаю, что вы хотите.

      • Александр
        7 лет 4 месяца назад / ответ на коммент Dimox

        Спасибо, что откликнулись. Честно говоря я полный 0 в jquery и javascript. Делаю корзину в интернет магазине. по замыслу дизайнера в корзине есть поле input type=number, по изменению которого, должна пересчитываться сама корзина сумма и количество. при изменении поля, я отправляю данные в скрипт onchange="this.form.submit ();". но у формы (input type=number) есть доп. кнопки для увеличения и уменьшения значений. После стилизации, событие onchange не применяется к форме.
        screencast.com/t/7c6a3N2z. Вот тут и встает вопрос какое событие нужно применить к данным кнопкам, или самой форме, что бы после использования именно данных кнопок, я мог отправить данные скрипту, без дополнительных действий, со стороны пользователя. (без стилизации событие onchange естественно работает для формы)

  4. Владимир
    7 лет 4 месяца назад

    Добрый день! Спасибо за плагин!!!
    Подскажите пожалуйста, дробные числа никак нельзя использовать в step=""?
    Необходимо увеличивать шаг на 0.5

  5. Руслан
    7 лет 4 месяца назад

    Здравствуйте! Проблема со стилизацией селектов. Если в опциях плагина изменить placeholder у селекта, то перестает выбираться первый пункт меню селекта. Если же выбрать допустим сначала 3 пункт, а после первый пункт, то все отлично. Как решить данную проблему?

  6. c1n1k
    7 лет 4 месяца назад

    проблема со стилизацией и нестандартными шрифтами возникла и при подключении через стили, без google font, + setTimeout не помогает, можно как-то решить это?

  7. Данил
    7 лет 4 месяца назад

    Здравствуйте. Подскажите пожалуйста решение следующей проблемы.
    На этой странице test2.sagadegu.bget.ru/shop/BazaPelikan/LBT3417 используются два селекта. При выборе первого селекта теряется стилизация второго селекта.

    Спасибо

  8. Дима
    7 лет 4 месяца назад

    Дим, привет. Проверял работу на ios? Лично у меня из 3-х чекбоксов можно выбрать только один т. е. делается checked, а обратно в не checked уже не делается. Остальные тоже менять нельзя после того как один из чекбоксов чекнутый.

  9. Алина
    7 лет 4 месяца назад

    Добрый день!

    Спасибо за плагин, использовала в нескольких сайтах.
    но сейчас столкнулась с непредвиденным поведением select. Может вы о нем знаете и у вас уже есть решение…
    В моем случае селект находиться внизу страницы, в фиксированном блоке. в Мозиле все ок, раскрывающийся список внизу не помещается, и оно появляется сверху prntscr.com/b8k3aj,
    а вот в хроме беда, он внизу и в область просмотра не помещается prntscr.com/b8kang
    Приходилось сталкиваться с такой проблемой? В чем может быть дело? и как это исправить?

  10. Дмитрий
    7 лет 3 месяца назад

    Добрый день.
    Не могу понять, почему не работает checkbox. Снимаю стилизацию — всё ок.
    Ситуация: при активном checkbox должно выводиться сообщение. Сейчас же при клике ничего не происходит.

    if ($(".nabor").prop("checked")) alert('aaa');

    refresh тоже не помогает.

    Подскажите, что нужно сделать?

  11. Максим
    7 лет 3 месяца назад

    Здравствуйте, не могу отключить плагин от checkbox, может что делаю неправильно, подскажите

  12. Николай
    7 лет 3 месяца назад

    Дмитрий, добрый день!
    Не могли бы Вы подсказать, почему на странице моего сайта раскрывающийся список-меню раскрывается вверх? И как можно сделать, чтобы он раскрывался вниз. Когда пробую без стилей, открывается вниз.

  13. Олег
    7 лет 3 месяца назад

    Добрый день

    <select data-placeholder="Выберите пункт">
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>

    Вот в таком вариатне после выбора какого либо пункта нельзя сбросить селектор.
    Нельзя ли как-то штатными средствами отображать в выпадающем списке первый пустой пункт?
    Просто добавить текст в option

    <option value="">Не задано</option>

    не подходит, так как оформлен он будет не так, как при отображении плейсхолдера. У вас даже тут в примерах отображение плейсхолдера отличается от отображния пунка «-- Выберите --»

    • Dimox
      7 лет 3 месяца назад / ответ на коммент Олег

      не подходит, так как оформлен он будет не так, как при отображении плейсхолдера

      Стилизуйте этот пункт через отдельный класс. Смотрите пример с иконками флагов в самом низу страницы примеров с селектами.

  14. Виктор
    7 лет 3 месяца назад

    Здравствуйте, а можно сделать при фильтре в select поиск по точному названию текста…
    Пример:
    есть два города Киев и Москва, при вводе буквы «К» — оставлять только Киев…?
    P. S. очень полезное ваше решение, спасибо за труды…

  15. Олег
    7 лет 3 месяца назад

    Здравствуйте! Подскажите, пожалуйста, как реализовать такую возможность с вашим плагином:
    есть стилизованный селект, и необходимо сделать так, чтобы на него можно было повесить стандартный обработчик события change, не через jquery.
    Делаю это таким образом после инициализации селекта, не работает:

    document.querySelector ('#select').addEventListener ('change', function () {

  16. константин
    7 лет 3 месяца назад

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

  17. Руслан
    7 лет 3 месяца назад

    Здравствуйте! Не срабатывает метод destroy.

    $("select").styler();
$(".button").click(function(){
$("select").styler("destroy");
});
  18. Виктория
    7 лет 2 месяца назад

    Подскажите, пожалуйста, можно ли как-то модифицировать библиотеку, чтоб под ios открывался селект как под десктоп? Не могу понять, почему подставляется нативный select. Под android-телефоном все как на десктопе.

  19. Виктория
    7 лет 2 месяца назад

    У меня получилось срыть нативный селект на ios=) и очень просто. Добавьте стиль
    .jq-selectbox select {
    display: none! important;
    }
    Проверено на ios 9.3.2 в хроме и сафари.
    Спасибо!

  20. Борис
    7 лет 2 месяца назад

    Добрый день!
    Поправьте, пожалуйста, bower. json в репозитарии GitHub’a, почему-то там «name»: «jquery-form-styler», в то время как сам bower знает ваш плагин под именем «jquery.form-styler».
    Такие вот дела:)

    P. S. Вообще считаю идеальным, когда имя репозитария, имя пакета и имя пакета в пакетных менеджерах одно и тоже… а, то пока не нагуглишь не разберешься%)

    • Dimox
      7 лет 2 месяца назад / ответ на коммент Борис

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

      Если подскажете, как это сделать, будет здорово. Сам я в этом ничего не понимаю.

      • Борис
        7 лет 2 месяца назад / ответ на коммент Dimox

        В теории как-то так:
        https://github.com/bower/bower/issues/120 и https://bower.io/docs/api/#register

        Т. е.:

        $ bower unregister <package>

        Затем поправить bower. json, ориентируясь на спецификацию (не забыв привести имя пакета к какому-то общему виду) и сделать

        $ bower register <name> <url>

        Где url ссылка на GitHub, следует полагать.
        Затем поменять имя репозитария — stackoverflow и это может быть проблемой при наличии контрибьютеров и командной разработки в принципе.

        Поэтому предлагаю в настоящем репозитарии в bower. json просто указать имя пакета, которое знает пакетный менеджер, т. е. «jquery.form-styler».
        По крайней мере я в bower. json жду правдивой информации, да и привык туда заглядывать, потому что несовпадения имен репозитария и пакета это часто встречающаяся ситуация.

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