Главная › 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. Kos
    5 лет 2 месяца назад

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

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

    });

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

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

  3. Aison
    5 лет 2 месяца назад

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

  4. Aleksandr
    5 лет 1 месяц назад

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

  5. overflow
    5 лет назад

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

  6. Иван
    5 лет назад

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

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

  7. Игорь
    5 лет назад

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

  8. sm
    5 лет назад

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

  9. Назар
    5 лет назад

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

  10. Олег
    5 лет -1 месяц назад

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

     <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. Alexey
    5 лет -1 месяц назад

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

    $(elem).prop('checked')

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

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

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

  12. Ольга
    5 лет -1 месяц назад

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

  13. Наталья
    4 года 10 месяцев назад

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

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

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

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

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

  14. Дмитрий
    4 года 10 месяцев назад

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

  15. Дмитрий
    4 года 10 месяцев назад

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

    if (iOS) return;

    строку

    if (Android) return;

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

  16. Владимир
    @
    4 года 9 месяцев назад

    Здравствуйте!
    На странице одиночный 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. Andrew
    4 года 9 месяцев назад

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

    • Andrew
      4 года 9 месяцев назад / ответ на коммент 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)
            }
        });
    }
});
  18. Prooksius
    4 года 8 месяцев назад

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

  19. Евгений
    4 года 7 месяцев назад

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

  20. Виталий
    4 года 7 месяцев назад

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

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