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. Выложил новую версию плагина — 1.5.5.

  2. А как открыть селект с помощью JS?
    Делаю связанные селекты… по автомобилям производитель->год->модель

  3. Если заполнить data-placeholder у select-а и нет пустого тега option, то текста-подсказки «Выберите..» нет. Хотя логически должно быть.

  4. Александр
    5 лет назад

    Плохо что нет поддержки IE7. Можно как-то заставить IE7 использовать стандартное оформление?

  5. версия 1.5.5
    строка №634 «.bind(‘keydown.styler keyup.styler’, function(e) { » про изменение селекта с клавиатуры.
    если в строке убрать keyup.styler, то «открываем выпадающий список при нажатии Space» будет работать
    и проблема закрытия селекта сразу после открытия, будет решена.
    И можно смело раскомментировать строку
    «// divSelect.click();»

    • но тогда появились проблемы с листанием в нераскрывшемся селекте пунктов и + еще проблемы.
      Поэтому раскрытие селекта при нажатии на пробел вынес отдельно на нажатие клавиши.
      В итоге получилось так:

      
      // строка №634
      // изменение селекта с клавиатуры
      .bind('keydown.styler keyup.styler', function(e) {
              var liHeight = li.data('li-height');
              divText.text(option.filter(':selected').text());
              li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
              // вверх, влево, Page Up, Home
              if (e.which == 38 || e.which == 37 || e.which == 33 || e.which == 36) {
                      ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top);
              }
              // вниз, вправо, Page Down, End
              if (e.which == 40 || e.which == 39 || e.which == 34 || e.which == 35) {
                      ul.scrollTop(ul.scrollTop() + li.filter('.selected').position().top - ul.innerHeight() + liHeight);
              }
              // открываем выпадающий список при нажатии Space
      // перенес отдельно
      //	if (e.which == 32) {
      //		e.preventDefault();
      //		// можно было бы открывать через запуск divSelect.click(),
      //		// но почему-то список после открытия сразу закрывается
      //		// решение пока не найдено
      //		//divSelect.click();
      //									}
              // закрываем выпадающий список при нажатии Enter
              if (e.which == 13) {
                      e.preventDefault();
                      dropdown.hide();
                      selectbox.removeClass('opened');
                      // колбек при закрытии селекта
                      opt.onSelectClosed.call(selectbox);
              }
      }).bind('keydown.styler', function(e) {
              // открываем выпадающий список при нажатии Space
              if (e.which == 32) {
                      e.preventDefault();
                      divSelect.click();
              }
      })
      
  6. Андрей
    5 лет назад

    Очень понравился Ваш плагин но не хватает поиска и выбора в мультиселекте.

    Скажите, будет ли осуществлена возможность поиска в мультиселекте и выбора пунктов.
    Выбор пунктов можно сделать как здесь, вот только удалять выбранные пункты не backspace & del, а сделать крестик: http://plugins.jquery.com/selectize/
    PS: смотрите в демо.

  7. хм, а как бы на андроиде вызвать нативный селект, мультиселект выбрать невозможно

  8. Выложил новую версию — 1.5.6.

  9. Сергей
    5 лет назад

    Здравствуйте.
    Спасибо за работу и поддержку данного плагина.
    Столкнулся с небольшой проблемой
    (скрин удобного объяснения проблемы http://prntscr.com/4l644z ).

    Уменьшив правый падинг с 45px на 25px, ширина выпадающего списка теперь не правильно высчитывается. Есть ли решение этой проблемы?
    Ширина выпадающего списка все равно учитывает правый падинг 45px и тем самым выходит за рамки верхнего блока.
    Буду весьма признателен на любой ваш ответ, за ранение благодарен.

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

  10. Сергей
    5 лет назад

    Хочу добавить, что эта проблема не касается последней версии, это наблюдалось и в остальных версиях.
    Большое спасибо, непременно буду ждать результатов. Спасибо.

  11. Заметил небольшой глюк, скорее всего не срабатывает триггер(срабатывает только один раз) — в следующем коде: $(this).attr(«checked», true).trigger(‘refresh’), хотя в самом input атрибут задается, зато с («checked», false) срабатывает всегда.

  12. А вот интересно, это только у меня следующая проблема?
    Предположим есть селект с множеством опций. Их количество такое, что для того чтобы выбрать нужную необходимо перемотать список. Т.е. опция в самом низу и ее позиция вне видимого диапазона при открытии списка. Так вот, если на Android выбирать эту опцию, то выбирается совсем другая, та которая находится на этом месте при открытии списка. Т.е. браузер не понимает, что список перематывается и выбирает то, что было на месте тапа до перемотки. Проверял на Galaxy Tab 10.1
    Можно как-то нативный выбор предлагать при раскрытии списка для Android устройств?

    • Только что проверил в Андроиде на демо-странице плагина — ничего подобно не наблюдаю, что длинный, что короткий список — все работает замечательно.

      В каком браузере проверяли?

      Чтобы сделать нативный, найдите эти строки:

      
      var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false;
      if (iOS) return;
      

      и замените на такие:

      
      var Android = navigator.userAgent.match(/Android/i) ? true : false;
      var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false;
      if (Android || iOS) return;
      
      • Да, на более поздних моделях устройств эта проблема отсутствует.
        У проблемной таблетки браузер AndroidBrowser 4.0
        Он ко всем позиционированным блокам с перемоткой так относится.
        После внесения изменений в плагин при клике на оболочку селекта нативный выбор опций на устройстве не открывается. =(

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

    Просьба, если это возможно, когда срабатывает умное позиционирование для селекта (когда список появляется над ним) добавлять какой-то класс к контейнеру .jq-selectbox. top например. Это нужно для усовершенствования стилизации. Например скругленные края только в нижней части выпадающего списка, а когда список выше, то скругляются верхние края.

  14. У меня получилась очень странная вещь. У меня на сайте много разных элементов на jQuery. Подключил и Ваш. Все работает. Но если сейчас отключить файл jquery.formstyler.min.js, то перестают работать карусели и аккордионы установленные ранее и прекрасно ранее работающие. Не подскажете почему так получается?

  15. Приветствую, у вашего плагина случаем нет такой возможности чтобы не затрагивать определенные блоки по id или еще как нибудь..?

  16. Добрый день. Подскажите пожалуйста, возможно ли динамически через JS изменять текст selectPlaceholder для селекта? На форме есть два зависимых селекта «Страна-Производитель». Для селектов указан тег data-placeholder=»All» и в каждом по дефолту пустой All. При выборе страны из первого селекта, если Ajax-запрос вернул пустой результат, во вотором селекте нужно текст «All» плейсхолдера поменять на «No Items». Уже перепробывал менять через attr(«data-placeholder», «No Items»), добавлением пустого No Items, trigger(‘refresh’) вконце, но всеравно плейсхолдер не меняется. Пробовал изменять через JS сам текст в All, но jquery по селектору $(«.»jq-selectbox__select-text.placeholder») возвращает вовсе не этот елемент. Спасибо

  17. Добрый вечер!

    Пользовался раньше версией 1.4.9. Вчера обновился до 1.5.6 из-за плейсхолдера и обнаружил, что стилизованные чекбоксы перестали наследовать дата-атрибуты. В истории изменений по плагину ничего такого не заметил. Откатился до старой версии, потому что на дата-атрибутах у меня многое завязано.

  18. Здравствуйте, пользуюсь вашим плагином, довольно крутая штука, вот только возникли загвоздки с полем input=’radio’ , а именно не убираются состояние checked при клике на input=’radio’, в чем может быть проблема?

  19. а нет стилей написанных для препроцессора?:)

  20. Какая-то проблема с selectPlaceholder. Если его значение не задано и не указан атрибут data-placeholder, то по умолчанию выводится «Выберите…», а первый пункт из селекта вообще не доступен. Как сделать, не задавая этих атрибутов, чтоб по умолчанию уже был выбран первый пункт селекта?

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