Главная JavaScript

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

  1. Здравствуйте, так и не разобрался, как применить стайлер к динамически созданному элементу? Точнее при такой реализации второй и следующие селекты не выпадают:

    $('#add_position').click (function () {
    var block = $(this).prev ('.one_position');
    block. clone ().insertAfter (block);

    });

  2. Большой спасибо за плагин, пользуюсь уже несколько лет! На сегодня замечена только 1 проблема — селекты не раскрываются в safari на ios (просто ничего не происходит по нажатию на него). Есть ли решение этого?

  3. Привет. есть возможность отключить плагин для определённого элемента. например для select включить, для multi-select выключить? также предлагаю добавить вот такую возможность https://www.jqueryscript.net/form/Select-Replacement-Plugin-jQuery-Selectator.html возможность мультивыбора в виде тегов.

  4. Появилась проблема на iPad в fancybox 3. Селект в датапикере юишном. Открываю селект, фокус переходит на первый инпут в попапе, а сам селект закрывается и датапикер висит. такое только на яблоке. Что-то не могу понять в чем проблема

  5. Новая версия в некоторых IOS вообще перестала работать (я про селекты). Раньше хотя бы без стилизации хоть как-то работало (стандартный список селекта для ios открывался)

  6. Ребят подскажите как можно сделать подобного рода select или input пока еще не разобрался

    cdn.discordapp.com/attachments/371 824 836 948 787 200/488988204033245186/demAnd_chart.png

  7. Добрый день! Проблема с селектом в модальном окне. когда вызываю модальное окно ни чего не работает. С этим как бороться? спасибо

  8. в select если включено поле поиска по списку, то не работает листание списка с клавиатуры (UP/DOWN). как можно исправить?

  9. у меня такая ошибка prntscr.com/kwakip
    ни как не могу решить её, кто-то может помочь?

  10. Добрый день, мне понадобилось вывести более сложную структуру в

     <option>пункт</option>

    в виде

    <option><div><b>Что-то</b></div> - куда то <option> 

    не знаю как добавить скрин, так что временный http://prntscr.com/l2gdkk

    и это невозможно

    Но так получилось что на проекте уже был плагин и я немного немного модифицировал select

    <option class="тут специфичные классы с иконками" data-first="Что-то" data-last=" - куда то" >Что-то - куда то</option>

    получилось примерно так

    <select class="search_styler">
    <option class="" data-first="Что-то 1" data-last=" - куда то 1" >Что-то 1 - куда то 1</option>
    <option class="" data-first="Что-то 2" data-last=" - куда то 2"><b>Что-то 2 - куда то 2</b></option>
    <option class=""  data-last="есть куда то 3, но нет чего...">Нет чего-то - но есть куда то 3</option>
    </select>

    и модифицировал jquery. formstyler
    примерно 550 строка — формирование псевдоселекта

    if (option.first().text() === '' &amp;&amp; option.first().is(':selected') &amp;&amp; selectPlaceholder !== false) {
    divText.text(selectPlaceholder).addClass('placeholder');
    } else {
    //start
       //если у select class="search_styler" 
         if(el.attr('class') == 'search_styler') {
         // найдем дата атрибуты и впихнем их в переменные textF (текстПервый) и textL (текстВторой)
         // если их нет, тогда false
             var textF = (el.find('option:selected').data('first')) ? el.find('option:selected').data('first') : false;
             var textL = (el.find('option:selected').data('last')) ? el.find('option:selected').data('last') : false;
         // если они у нас вообще есть, если нет, тогда стандартный вывод
             if(textF &amp;&amp; textL || textF || textL) {
                   //второй текст у меня в любом случае будет, а вот первый нет
                   // добавил проверку, что бы лишних <b> не висело, на сам <div> почему то не впихнул)))
                  divText.html('<div><div>'+(textF != 0 ? '<b>'+textF+'</b>': '')+'</div> '+textL+'</div>')
             }else {
                  divText.html(optionSelected.text());
             }
       }else {
           //стандартный вывод
            divText.html(optionSelected.text());
       }	
    //end				
    }
    

    примерно 820 строка — изменение селекта
    тут все тоже самое.

    el.on('change.styler', function() {
    //start
      if(el.attr('class') == 'search_styler') {
        var textF = (el.find('option:selected').data('first')) ? el.find('option:selected').data('first') : false;
        var textL = (el.find('option:selected').data('last')) ? el.find('option:selected').data('last') : false;
                                    
          if(textF &amp;&amp; textL || textF || textL) {
            divText.html('<div><div>'+(textF != 0 ? '<b>'+textF+'</b>': '')+'</div> '+textL+'</div>')
          }else {
            divText.html(option.filter(':selected').text()).removeClass('placeholder'); 
          }
        }else {
          divText.html(option.filter(':selected').text()).removeClass('placeholder'); 
        }
    //end
    li.removeClass('selected sel').not('.optgroup').eq(el[0].selectedIndex).addClass('selected sel');
    if (option.first().text() != li.filter('.selected').text()) {
    selectbox.addClass('changed');
    } else {
    selectbox.removeClass('changed');
    }
    })

    Писал на коленке, так как сдавать проект. Мне этого хватило что бы удовлетворить заказчика.
    Может кому поможет

    ДЕЙСТВУЙТЕ НА СВОЙ СТРАХ И РИСК, ЕСЛИ НЕ ПОНИМАЕТЕ ЧТО ТУТ ТО НАЙДИТЕ ТОГО КТО ПОНИМАЕТ.

  11. Висит на checkbox обработчик
    если без плагина — то elem — собственно чекбокс

    $(elem).prop('checked') 

    в обработчике будет true

    если с плагином то будет false

    иными словами
    обычный чекбокс в момент обработчика клика — уже переключил свое состояние,
    а плагин — нет
    что не очень приятно

  12. Так и не поняла как он работает с input[type='number']. Все подключила как в описании. Ничего не поменялось.

  13. Дмитрий, нужна ваша помощь.
    Пытаюсь реализовать адаптивные вкладки, которые на мобиле будут отображаться в виде стилизованного select (используя ваш скрипт конечно). Идея такая — на desktop отображаем обычные вкладки, на мобиле — вместо вкладок показываем select. Вкладки и select должны быть взаимосвязаны — при активной вкладке № 3, select тоже должен отображать название вкладки № 3 и наоборот.

    Мои действия:
    1. На просторах интернета взяла скрипт вкладок, которые уже привязаны к select и работает взаимосвязь.
    2. Подключила к select ваш скрипт. Демо — https://jsfiddle.net/moireceptik/q8uyhj7t/

    Проблема:
    Взаимосвязь вкладок и select пропала (если кликать по select — видно как активная вкладка меняется, а вот если кликать по вкладкам — select не меняется на нужный номер)!

    Нужно внести изменения в скрипт, чтобы вернуть взаимосвязь. Сможете помочь?

    PS. Наверняка такие адаптивные вкладки заинтересуют многих верстальщиков, но готового варианта (со стилизацией select) пока еще нет в инете, а он так необходим на сегодняшний день!

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

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

    if (iOS) return;

    строку

    if (Android) return;

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

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

  17. Всем привет! Вопрос такого плана.
    Использую 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 скилла.
    Может кто сталкивался? В какую сторону смотреть?
    Спасибо!

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

      $(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)
                  }
              });
          }
      });
      
  18. Есть проблема с отображением контролов, если они изначально скрыты (к примеру в скрытой форме попапа, которая показывается после нажатия какой-то кнопки).
    Так вот, если вызывать активацию плагина для скрытых элементов, то скрипт неправильно считает их высоту. Используется jquery функция outerHeight (), которая при скрытых элементах возвращает 0. И в итоге имеем косяки со стилями выпадающих списков и мультиселект вообще нулевой высоты. Два часа искал причину.

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

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

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