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

  1. Здравствуйте. Не получается заставить заработать чекбокс, если добавляется информация динамически, чекбокс стилизуется после обновления страницы.
    Пытаюсь сделать в init.js вот так

    
    (function($) {
    $(function() {
      $('input, select').styler();
    
    });
    })(jQuery);
    
    $('#clickAddress').click(function(e) {
      		e.preventDefault();
      /* делаем чекбокс неактивным */
      $('input:checkbox').attr('disabled', true)
        /* обновляем состояние псевдочекбокса */
        .trigger('refresh');
    });
    

    Я, как понимаю, делаю что-то не так?

  2. Привет, как вызвать плагин при динамическом добавлении контента в dom?

  3. Добрый день
    Можно ли через данный плагин реализовать http://prntscr.com/7v6t72 ?

  4. Привет последнее время стал замечать проблему,
    http://SSMaker.ru/06e7509e/
    Копирую все с примера … но почему он все радио отмечает и не снимает потом … в чем может быть проблема ? стоит только твой плагин и jquery 11

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

  6. Здравствуйте.
    Благодарю за скрипт. На многих сайтах использую ваш скрипт, но очень не хватает мультиселектора в виде выпадающего списка с Checkbox-сами слева, по аналогии как с одиночными селектами. Приходится ставить сторонние скрипты, что не очень удобно. Хочется все таки иметь все в одном пакете.

    Я ускорения реализации я готов немного профинансировать данную опцию :).
    Благодарю и надеюсь на ваш ответ

  7. Спасибо за классный и простой в использовании скрипт!
    Вопрос по . Как можно оставить стандартную фразу () после выбора файлов “Число файлов (х)” вместо перечисления названий файлов (как сейчас)?
    Заранее благодарю

  8. В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.

    Планируется ли решение данного вопроса? :)

  9. А мне ответьте, пожалуйста!

  10. Константин
    6 лет 1 месяц назад

    Дмитрий, добрый день!
    Есть такой вопрос.
    При выборе чекбокса, можно ли сделать чтобы подсвечивался и текст лейбла?

    
    <label><input type="radio" name="" class="radio" /> название лейбла</label>
    

    Реально ли в данном случае при клике добавить тегу какой-нибудь класс?

    PS. Извиняюсь, если дублирую вопрос.

  11. классный плагин, но не хватает документации на английском
    фактически, нерусскоязычным его использовать невозможно

  12. Было бы отлично если б ваш плагин поддерживал структуру вложенных списков при использовании optgroup. Это нужно для реализации подобных штук http://prntscr.com/80a6dp

  13. Привет Дима.

    В общем, с радио есть беда! Без скрипта работает хорошо, а при подключении скрипта выбор идёт, а снятие выбора не происходит. Причем name везде одинаковый, пробовал и с лэйблами и без них. Обновлял версию jquery.

    vlad 10 дней назад уже написал об этом баге, но ты так и не прокомментировал его.

    Видимо, решения пока нет. Думаю, это какой-то баг в chrome (в других браузерах не тестил).

    Ждём решения. Пока использует другие костыли.

  14. 
    $('#select1').change(function(){
    		$('#select2 :contains('+$(this).val()+')').attr("selected", "selected");
    	});
    

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

  15. странная реализация multiple select… почему вы не сделали его точно таким же как и обычной, только с возможностью выбора нескольких пунктов?

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

  17. Приветствую. В первую очередь, спасибо за плагин. Есть вопрос: зачем здесь, например, возвращается false? Дело в том, что этим самым прекращается дальнейшая обработка события, и его уже невозможно перехватить. Это касается не только селектов, но и чекбоксов с радио кнопками.
    Вот пример. Кнопка «Show tip» отображает какую-то, допустим, подсказку, которая должна скрываться по клику в любом месте документа. Однако, когда клик приходится на стилизованный элемент формы (именно на сам элемент, не лейбл), подсказка остается видимой. Кнопкой «Style/Unstyle elements» можно применять/отменять стилизацию, и убедиться, что клик по штатному селекту или чекбоксу подсказку таки скрывает, как положено.
    Заранее прошу прощения, если это я что-то делаю не так :)

  18. Несколько раз сталкивался с “багом” радиокнопки, при котором переключатель включается и больше не выключается (не убирается prop checked и класс .checked).
    Думаю, это кому-нибудь сэкономит время на поиск решения: радиокнопки обязаны(!) находиться внутри тега FORM.

  19. Коректно ли работает на мобильный iOS ? Имеем проект с данным модификатором селектора, win-base машины рендерят и отрабатываю скрипт нормально.
    На iPad — рендер блока штатный, однако никакого события по клику не происходит(выпадания списка).
    Автор, делали ли проверку скрипта на «яблоках»?
    Спасибо.

  20. Nice plugin!
    I want to use it on a page for formatting one checkbox.

    <input class="check" type="checkbox">
    $( document ).ready(function() {
       (function($) {  
    	    $(function() { 
    			$('.check').styler();
    		}); 
    	})(jQuery);
    });
    

    It works great.
    Now, I would like to catch the “click” event, but obviously the following code does not work:

    
            $('.check').click(function() {
                alert( "Handler for .click() called." );
            });
    

    Can you suggest something?

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