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. Александр
    7 лет назад

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

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

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

  2. Андрей
    7 лет назад

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

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

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

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

  6. Евгений
    7 лет назад

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

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

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

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

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

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

  10. Константин
    7 лет назад

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

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

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

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

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

  12. Евгений
    7 лет назад

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

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

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

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

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

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

  14. Сергей
    7 лет назад
    
    $('#select1').change(function(){
    		$('#select2 :contains('+$(this).val()+')').attr("selected", "selected");
    	});
    

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

  15. Евгений
    7 лет назад

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

    • Ничего странного. Сделано по аналогии с нативным мультиселектом Windows.

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

  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?

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