jQuery Form Styler – плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Комментарии (2614)

1. 

   Дмитрий

   26 ноября 2018 г. в 22:58

   Ответить

   Добрый день.
   Стилизовал select через плагин. Возник такой вопрос:
   Когда кликаю по селекту на мобиле iOS, происходит стандартное поведение выбора опций (карусель внизу) – все ок.
   Когда кликаю по селекту на мобиле Android, появляется стилизованный список (мне нужно попап окно с прокруткой, как при не стилизованном стелекте). Подскажите, как можно исправить?

2. 

   Дмитрий

   28 ноября 2018 г. в 00:19

   Ответить

   Добавил в jquery.formstyler.js после

   if (iOS) return;

   строку

   if (Android) return;

   При клике на селект на андроиде стилизованный список пропал, но нативный список так и не появился…Может есть какое решение, подскажите.

3. 

   Владимир

   13 декабря 2018 г. в 18:06

   Ответить

   Здравствуйте!
   На странице одиночный select с атрибутом data-search=”true”. По выбору происходит перезагрузка страницы с учетом выбранного (фильтр ajax post).
   Так вот при выборе из списка элемента происходит перезагрузка страницы с указанной опцией из select. В консоле post выглядит так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20177%207181.
   Но если воспользоваться поиском по select и выбрать элемент, то post выглядит уже так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=0
   filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20374%203472.
   Т.е. при поиске он берет предыдущий выбранный пункт, соответсвенно фильтр не срабатывает на выбранный пункт. Это у меня такой глюк или так и должно быть?

4. 

   Andrew

   18 декабря 2018 г. в 23:50

   Ответить

   Всем привет! Вопрос такого плана.
   Использую jquery datepicker ui.
   Хочу закастомить селекты выбора месяца и года.
   У datepicker’а есть опция beforeShow тип которой функция с параметрами ( Element, Object ).
   В api datepicker’а написано примерно следующее:

   Функция, которая принимает поле ввода и текущий экземпляр datepicker, и возвращает объект параметров, с помощью которого можно обновить datepicker. Он вызывается непосредственно перед отображением даты.

   https://api.jqueryui.com/datepicker/#option-beforeShow

   Когда инициализирую datepicker, опции beforeShow передаю свою функцию dpSelectStyler
   Это выглядит следующим образом

   $(".default.datepicker-big").datepicker({
       showOn: "button",
       buttonImageOnly: false,
       dateFormat: 'mm.dd.yy',
       бла-бла-бла еще опции,
       beforeShow: dpSelectStyler
   });
   
   function dpSelectStyler(input, inst){
       console.log('dpSelectStyler');
       inst.dpDiv.find('select').styler();
   }
   

   Пробовал return inst.dpDiv.find(‘select’).styler();
   Пробовал эту функцию не выносить в отдельную и записать прямо после beforeShow:
   Результатов пока не добился. Не хватает JS скилла.
   Может кто сталкивался? В какую сторону смотреть?
   Спасибо!

   1. 

      Andrew

      19 декабря 2018 г. в 01:11 / ответ на коммент Andrew

      Ответить

      На данный момент пришел к такому варианту, однако при смене месяца, из за новых инициализациий видно, как плагин разваливается, и собирается повторно.

      $(document).ready(function() {
          datePickerInit();
          var uiDatepickerDiv = $('#ui-datepicker-div');
      
          $(".ui-datepicker-trigger").on('click', function() {
              $(this).offset().top <= uiDatepickerDiv.offset().top ? uiDatepickerDiv.addClass('to-bottom').removeClass('to-top') : uiDatepickerDiv.addClass('to-up').removeClass('to-bottom');
              datePickerSelectStyler();
          });
      
          function datePickerSelectStyler() {
              $('#ui-datepicker-div select').styler();
          }
      
          function datePickerInit() {
              $(".default.datepicker-big").datepicker({
                  showOn: "button",
                  buttonText: "<svg class='svg-ico calendar-big'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='/frontfiles/img/svg/sprite.svg#ico-calendar'></use></svg>",
                  changeMonth: true,
                  changeYear: true,
                  firstDay: 1,
                  buttonImageOnly: false,
                  dateFormat: 'mm.dd.yy',
                  onSelect: function() {
                      console.log('onSelect')
                      datePickerSelectStyler();
                  },
                  onChangeMonthYear: function() {
                      console.log('onChangeMonthYear')
                      datePickerSelectStyler();
                      setTimeout(function() {
                          datePickerSelectStyler();
                      }, 1)
                  }
              });
          }
      });
      

5. 

   Prooksius

   8 января 2019 г. в 19:57

   Ответить

   Есть проблема с отображением контролов, если они изначально скрыты (к примеру в скрытой форме попапа, которая показывается после нажатия какой-то кнопки).
   Так вот, если вызывать активацию плагина для скрытых элементов, то скрипт неправильно считает их высоту. Используется jquery функция outerHeight(), которая при скрытых элементах возвращает 0. И в итоге имеем косяки со стилями выпадающих списков и мультиселект вообще нулевой высоты. Два часа искал причину..

   1. 

      Олег

      8 января 2019 г. в 20:42 / ответ на коммент Prooksius

      Ответить

      используйте .trigger(‘refresh’); после показа попапа.

6. 

   Евгений

   13 февраля 2019 г. в 19:26

   Ответить

   Здравствуйте. У меня такой вопрос:
   Есть несколько селектов и их нужно стилизовать по разному, возможно ли это реализовать?

   1. 

      Jktu

      13 февраля 2019 г. в 19:50 / ответ на коммент Евгений

      Ответить

      Да, добавьте с select уникальный класс, или к родителю, от него и пляшите

7. 

   Виталий

   27 февраля 2019 г. в 00:28

   Ответить

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

8. 

   Сергей

   23 марта 2019 г. в 04:28

   Ответить

   Как динамически получить значение input tyep=number ?

9. 

   Олег

   22 мая 2019 г. в 19:11

   Ответить

   Здрасте. Вопрос на засыпку.)) – Как включить английский? Я имею введу для –

   <input type="file"/>

   А то в описании там…ссылочка не работает.!? Смотрел коменты, но про это вопросов не нашёл.

   1. 

      Олег

      23 мая 2019 г. в 23:25 / ответ на коммент Олег

      Ответить

      А-а.!? Разобрался.
      п.с. Сам с собой переписку веду.))

10. 

    Илья

    19 июля 2019 г. в 09:02

    Ответить

    Если нужно стилизовать только один input number то дня него есть отдельный плагин https://number-plugin.ru

11. 

    Игорь

    15 октября 2019 г. в 12:58

    Ответить

    Привет! Подскажите, почему скрипт не передаёт неактивные элементы в select?
    То есть у стандартного select есть option с атрибутом disabled, но после стилизации данный option доступен к выбору. Как подправить это дело?

12. 

    Beliyadm

    8 ноября 2019 г. в 19:26

    Ответить

    Приветствую. Отличный плагин.
    Один вопрос – как передать в инпут селект дополнительный блок\спан? Мне нужно по клику на селект показывать список цветов такого формата

    <option value="value1"><span class="colorval">colorval</span>Item1</option>

    Где в спане будет квадратик цвета.
    Сейчас на фронте это обрезается

    <div class="jq-selectbox__select-text">colorvalItem1</div>

13. 

    Константин

    26 января 2020 г. в 01:26

    Ответить

    Делаю один проект, решил воспользоваться вашим скриптом. Не могу разобраться как открыть селект при клике на label для данного селекта. Можете подсказать? Задача достаточно популярная, но нигде не смог найти ответа.

    Заранее благодарен!

14. 

    Kron

    14 апреля 2020 г. в 17:33

    Ответить

    Всем привет!

    У кого не работают селекты (у меня не раскрывались) на Android при использовании в fancybox, попробуйте отключить у fancybox при инициализации touch. Мне помогло.

    $('selector').fancybox({
    	touch: false
    });

15. 

    Нарт

    10 октября 2020 г. в 16:59

    Ответить

    Подскажите пожалуйста. Как сделать зависимые списки на этом плагине ?

16. 

    Андрей

    26 октября 2020 г. в 23:25

    Ответить

    Как в “select” выбрать определенный “option”, который зависит от get запроса?
    Например есть сортировка select-> по умолчанию, по убыванию, по возрастанию.
    Всегда стоит “по умолчанию”, если выбрать “по убыванию” происходит перезагрузка станицы и должно брать из get параметр, что нужно указать “selected” “по убыванию”, а не возвращать по умолчанию.
    Вот такое туповатое объяснение получилось.

17. 

    Василий

    14 декабря 2020 г. в 22:49

    Ответить

    Как подключать ваш плагин в проект на gulp и sass

18. 

    eLig

    14 апреля 2021 г. в 23:58

    Ответить

    Здравствуйте!
    В select не работает поиск, если вводить в формате, например телефон: +7 (812) и т.д.
    В консоли ошибка Uncaught SyntaxError: Invalid regular expression: /.*?+7 (812).*?/: Nothing to repeat

19. 

    Андрей

    3 ноября 2021 г. в 09:50

    Ответить

    Отличный плагин, но почему-то у меня не работает в iOS, точнее не открывается выпадающий список.
    Как поправить?
    https://codepen.io/eandycat/pen/gOxoapG

20. 

    Alex

    30 ноября 2021 г. в 15:05

    Ответить

    Убрать строку if (iOS) return;
    В ios, скорее всего, уже давно всё ок! ))