Главная › 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”]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Алексей
    6 лет 9 месяцев назад

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

  2. Александр
    6 лет 8 месяцев назад

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

  3. Егор
    6 лет 8 месяцев назад

    Добрый день, столкнулся с проблемой: мне нужно чтоб ширина селектора была равна длине самого широкого поля option. Такой пример есть в примерах работы плагина (селектор без заданной ширины). Но когда я не задаю ширину селектора его ширина меняется в зависимости от выбранного пункта option а не остается всегда равной самой большой длине.

  4. Максим
    6 лет 8 месяцев назад

    Здравствуйте! Возникла проблема http://test.cmski.ru/login/ поле чекбокса не правильно работает, и при клике на label тоже не работает, не могли бы Вы подсказать как это исправить?

  5. Wrecker
    6 лет 8 месяцев назад

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

  6. Ярослав
    6 лет 8 месяцев назад

    Здравствуйте! Как можно переинициализировать селект? Скажем по ajax меняется набор option.

  7. Марина
    6 лет 8 месяцев назад

    Здравствуйте! Подскажите, пожалуйста, возможно ли подключить селект с поиском на мобильный? На мобильном хорошо работает как селект, но при клике на поле не появляется клавиатура для ввода текста… Спасибо!

  8. panfil3
    6 лет 8 месяцев назад

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

  9. Дмитрий
    6 лет 8 месяцев назад

    Добрый день! Как реализовать селект с анимацией? Мне нужно чтобы была анимация slideToggle.

  10. BazMaster
    6 лет 7 месяцев назад

    Не могу понять, почему у одиночного селекта выпадающие пункты перекрывают сам селект: http://joxi.ru/eAO4QPbux55ZDr . Стили для позиционирования jq-selectbox__dropdown прописываются в аттрибуте style. Как повлиять на них?

    • BazMaster
      6 лет 7 месяцев назад / ответ на коммент BazMaster

      Без класса width-200 выпадающие пункты вообще ломаются: http://joxi.ru/EA4pPygswQQjXA

    • Dimox
      6 лет 7 месяцев назад / ответ на коммент BazMaster

      Никак не повлиять. Они формируются скриптом, т.к. могут меняться в зависимости от расположения селекта на экране. Возможно, что причина в каких-то стилях вашей страницы.

      • BazMaster
        6 лет 7 месяцев назад / ответ на коммент Dimox

        Спасибо за ответ!
        Использую UiKit фреймворк и селекты оказывается находились в вкладках и в модалке и изначально не были видны.
        Просто styler() не помог, пришлось уничтожать и снова создавать селекты при смене вкладки:

        	$("#settings-form").on("show", function() {
		$('select').styler('destroy').styler();
	});

        Визуально всё вроде бы работает, правда контент вкладок стал подгружаться через секунду (раньше было мгновенно), видимо после переинициализации всех селектов.

  11. Gennadiy
    6 лет 7 месяцев назад

    Здравствуйте!
    Работаю с плагином почти год, за это время обнаружил несколько багов:
    1) Иногда невозможно выбрать 1 элемент из выпадающего списка;
    2) При работе с android при клике на поле “Поиск…” вылазит android keyboard, которая закрывает select и он сворачивается;
    3) Плагин не работает на ios.

    Моё решение для версии плагина 1.7.6:

    //**********************************************************************************************************************
//Fix JSF Bugs
setTimeout(function(){
    /**
     * --------------------------------------------------------------------------------------
     * bug # 1 -  суть бага в том, что не плагин не позволял выбрать 1 элемент из выпадающего списка
     */
    //ловим все клики по элементам выпадающего списка
    $('body').on('click', 'div.jq-selectbox__dropdown li.sel.selected', function (e) {
        e.preventDefault();
        //если элемент не выбрался, то выбираем его насильно
        if($(this).parents(':eq(2)').find('div.jq-selectbox__select div.jq-selectbox__select-text').is(':empty')){
            $(this).removeClass();
            $(this).click();
        }
    });
    /**
     * --------------------------------------------------------------------------------------
     * mobile bug # 2 -  при клике на поле "поиск..." вверху списка, выскакивает android клавиатура,
     * которая закрывает собой список и он сворачивается в исходное положение.
     * Решение: удалить классы: dropdown, opened. И поднять список вверх, чтобы его не закрывала android клавиатура.
     */
    var search,submodal,modal,header;
    $('body').on('click', 'div.jq-selectbox.jqselect', function (e) {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            $(this).removeClass('opened');
            $(this).removeClass('dropdown');
        }
    });
    $('body').on('click', 'div.jq-selectbox.jqselect input[type=search]', function (e) {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            try{//обработка случаев в модальных окнах
                search = $(this);
                submodal = $(this).closest('.modal-body');
                modal = $(this).closest('.modal');
                header = $(this).closest('.modal-content').find('.modal-header');
                var currentSelectPosition = $(this).parents().eq(2).offset().top;
                var currentScrollPosition = $(this).closest('.modal-body').scrollTop();
                var currentModalScrollPosition = $(this).closest('.modal').scrollTop();
                var currentHeaderPosition = $(this).closest('.modal-content').find('.modal-header').offset().top;
                var needDistance = currentScrollPosition + (currentSelectPosition - currentHeaderPosition) - currentModalScrollPosition;
                submodal.scrollTop(needDistance);
                //для случая когда scroll modal-body прокручен до максимума и тогда нужно прокрутить еще scroll modal
                if(submodal.scrollTop() < needDistance &amp;&amp; modal.scrollTop() != ( needDistance - submodal.scrollTop() )){
                    modal.scrollTop( modal.scrollTop() + ( needDistance - submodal.scrollTop() ) )
                }
            }catch(e){//обработка случаев на обычной странице(html, body) - обрабатывается автоматически  плагином
                //$('html, body').scrollTop(currentSelectPosition - 70);
            }
            setDownDropdownListForJFS($(this).parents().eq(1));
        }
    });
    function setDownDropdownListForJFS(target){
        if($(target).css('bottom') != 'auto'){
            $(target).css('bottom','auto');
            $(target).css('top','27px');
        }
    }
    /**
     * --------------------------------------------------------------------------------------
     * mobile bug # 3 -  суть бага в том, что не плагин не работает на ios, и вместо него видим ios native drop down.
     * Решение: деактивация фокуса на select, что приводит к закрытию ios native drop down.
     * Важно: в самом плагине необходимо убрать строку - "if (iOS) return;", которая блокирует работу плагина для ios.
     */
    $('body').on('focus', 'select', function (e) {
        if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
            if($(this).parent().hasClass("jq-selectbox") &amp;&amp; $(this).parent().hasClass("jqselect")){
                $(this).blur();
            }
        }
    });
},5000);
//**********************************************************************************************************************

    Главное не забыть, что в самом плагине необходимо убрать строку:

    if (iOS) return;

    которая блокирует работу плагина для ios.

    • Alex
      6 лет 7 месяцев назад / ответ на коммент Gennadiy

      Главное не забыть, что в самом плагине необходимо убрать строку:

      Это не баг, это фича.

      Но лучше бы автор добавли опцию чтобы можно было выключать выпадающий список для мобильных устройств. Лично мне больше нравиться попап с выбором, на андроиде, чем выпадающий список.

  12. Саламат
    6 лет 7 месяцев назад

    Когда я изменяю select box автоматическое не принимает option value.Как можно решить

  13. pwnz22
    6 лет 7 месяцев назад

    Как получить выбранное значение из select?

    $(‘.js-select.’).val() – выдает пустоту

  14. Cheg
    6 лет 7 месяцев назад

    При ховере на выпадающий список селекта блокируется прокрутка всей страницы. Можно ли как-то это отключить?

  15. Варвара
    6 лет 7 месяцев назад

    Здравствуйте!
    столкнулась с багом, когда использую плагин во всплывающем окне (fancybox) – он добавляет прокрутку и нет возможности вытащить его с помощью z-index
    можно ли это как то поправить?

  16. Влад
    6 лет 6 месяцев назад

    Пытаюсь стилизовать селекты в кверевском datapicker-е (год и месяц)
    Но что-то или я путаю или все несколько хитрее
    Но в результате с первого клика datapicker не отображается, надо расфокусировать инпут и уже тогда после клика отображается datapicker со стилизованными селектами

    $(function () {
    $(".date-box").click(function(e) {
	e.preventDefault();
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true
        });
        $('select').styler();
    })
});
  17. Константин
    6 лет 6 месяцев назад

    Переделайте мультиселект как у бутстрапа и цены вашему плагину не будет http://silviomoreto.github.io/bootstrap-select/examples/

  18. Nik_Dev
    6 лет 6 месяцев назад

    Добрый день.
    А как сделать, чтобы select применялся только к определенному select?
    То есть, чтобы не все select менялись, а только 1.

  19. NonSolus
    6 лет 6 месяцев назад

    Добрый день, а как можно открыть select при фокусе?
    то есть при переходе по input’ам, по нажатию на Tab, при попадании на select он раскрывался

  20. Flix
    6 лет 6 месяцев назад

    Как сделать открытие списка только вверх?

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