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. У input number если задать атрибуту «step» десятичное число, то плагин отказывается работать.
    По спецификации атрибут step может принимать любое положительное число с плавающей запятой.
    Планируется ли поправить это в будущих версиях?

  2. Прикольная фича конечно, красивая, удобная, но есть проблема, не понимает объект в value
    например

    
    <select>
    <option value='{"with": 100,"without": 200, "d": 18, "dr": 16}'> 18
    </select>
    

    такую конструкцию просто ломает, потом допилю сам

  3. Почему при подключении скрипта мой нубский код, подключенный в отдельном файле перестает работать?

    $(document).ready(init);
    
    function init() {
        $(".pagination li").click(clickChange);
        
        function clickChange(){
            var curValue = $(this).attr('id');
            //alert(myValue);
            changeBackground(curValue);
        }
        
        
        
        $("#req").click(function(){
            $(".popup").fadeIn(200); // Медленно выводим изображение
            $(".request_form").fadeIn(200); // Медленно выводим изображение
        });
        
        $("#rez").click(function(){
            $(".popup").fadeIn(200); // Медленно выводим изображение
            $(".resume_form").fadeIn(200); // Медленно выводим изображение
        });
        
        $(".popup_bg").click(function(){	// Событие клика на затемненный фон	   
    		$(".popup").fadeOut(200);	// Медленно убираем всплывающее окно
            $(".request_form").fadeOut(200);	// Медленно убираем всплывающее окно
            $(".resume_form").fadeOut(200);	// Медленно убираем всплывающее окно
    	});
    }
    
    function changeBackground (myValue) {
            if (myValue=="radio1") {
                $("#slider").css("background", "url(img/1img.png)");
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio1").addClass('activeRadioslaid');
            }
            else if (myValue=="radio2") {
                $("#slider").css("background", "url(img/2img.png)"); 
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio2").addClass('activeRadioslaid');
            }
            else if (myValue=="radio3") {
                $("#slider").css("background", "url(img/3img.png)");
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio3").addClass('activeRadioslaid');
            }
            else if (myValue=="radio4") {
                $("#slider").css("background", "url(img/4img.png)");
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio4").addClass('activeRadioslaid');
            }
            else if (myValue=="radio5") {
                $("#slider").css("background", "url(img/5img.png)");
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio5").addClass('activeRadioslaid');
            }
            else if (myValue=="radio6") {
                $("#slider").css("background", "url(img/6img.png)");
                $(".pagination li").removeClass('activeRadioslaid');
                $("#radio6").addClass('activeRadioslaid');
            }
            
            
            //$("#slider").css("background", "url(img/2img.png)");
        }
        
        function auto() {
            var numImg = $('.activeRadioslaid').attr('id');
            if (numImg=="radio1") {var autoValue = "radio2";}
            else if (numImg=="radio2") {var autoValue = "radio3";}
            else if (numImg=="radio3") {var autoValue = "radio4";}
            else if (numImg=="radio4") {var autoValue = "radio5";}
            else if (numImg=="radio5") {var autoValue = "radio6";}
            else if (numImg=="radio6") {var autoValue = "radio1";}
            changeBackground(autoValue);
        }
        
        run = setInterval(auto, 5000);
  4. Большое спасибо, за отличную работу! Давно искал подобное решение, а найдя ваше — сразу же его применил во многих своих сайтах. :)

    Есть еще вопрос по мультиселекту. Нельзя ли реализовать так, что если у select’а стоит мультивыбор, то тогда он не превращается в прямоугольник+необходимость зажимания Ctrl при выборе других позиций… а сделать это в таком виде: http://freeway.kz/multiselect.jpg

    Заранее благодарен за ответ!

  5. не получается сделать, криво отображает как то..http://itmages.ru/image/view/3379372/dedcf028

    в jquery не силен, помогите кодом пожалуйста, чтобы выглядел select как тут
    http://itmages.ru/image/view/3379324/62899a1a

  6. Требуется выводить только 5 пунктов в выпадающем списке, остальные выезжают при прокрутке…

    Активирую плагин такими строками:

    
    $("SELECT").styler({
    	selectSearch: true,
    	selectSearchLimit: 5,
    	selectVisibleOptions: 5
    });
    

    в итоге пропадают пункты в select’е… стоит убрать selectVisibleOptions — пункты появляются…

    подскажите пожалуйста в чём проблема(

  7. При работе с type=»number» на мобильной версии (эмулятор) поле ввода отрабатывается со встроенным стилем, т.е. справа поля появляются «свои» (нативные) + и -, друг над другом в дополнение к тем кнопкам, что формируются стайлером. Их можно как-то убрать?

  8. если стилизовать select то вырезает html теги из option?есть какие то обходные пути так как в селекте должна быть цена и скидка ?

  9. Не могу разобраться как подключить плагин в виде модуля CommonJS.
    Установил через npm. Как его прикрутить к jquery?

    
    $ = require('jquery');
    require('jquery.formstyler');
    

    Или jQuery нужно объявлять глобально?

  10. Вот только обновил формстайлер, почему-то можно выбрать все радиокнопки. Т. е. позволяет выбрать все (все чекед). Почему? Как исправить. Хтмл такой:
    Венге
    Золотая ольха
    Орех
    Ясень

  11. да, помогло. ) Благодарю.

  12. В общем встретил я данный плагин в одном проекте… Версия плагина 1.7. На сайте кастомизированы с помощью плагина чекбоксы и селекты. Не знаю как с селектами, но для чекбоксов наблюдается следующее поведение: если сверху на обертку, создаваемую плагином над чекбоксами накидывать свои события на изменение программно состояния чекбоксов, то триггер refresh дает веселый результат:
    1. Пересоздается обертка, соответственно все навешенные события на обертку улетают.
    2. При инициализации в первый раз плагин скрывает оригинальный чекбокс через атрибут style. При вызове триггера refresh он копирует вновь созданной обертке стили оригинального чекбокса и… вуаля наш кастомизированный чекбок пропадает из поля зрения :)

    Первую проблему для чекбоксов решил добавив новый триггер, который просто проверяет состояние оригинального чекбокса и ставит в зависимости от его состояния соответствующий класс обертке. Вторую решил через стили с !important.

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

    <select onchange="this.selectedIndex = 0;">
    <option value="-1">Выберите</option>
    <option value="50">1пункт</option>
    <option value="100">2пункт</option>
    </select>

    Ведь функции этого события в «select» передаются успешно…
    Или есть вариант это сделать более посредством настроек скрипта?

    • Допетрил сам))
      Суть в том, чтобы при выборе любого из пунктов selectа он не менял первоначального состояния. Это полезно, когда select используется в форме ответа для форматирования текста, например.

      Пример здесь: http://jsfiddle.net/1fch6cfe/

  14. Спасибо за чудесный плагин.

    Дмитрий, подскажите, можно ли как-то манипулировать стилями или классами селекта на событие onchange? Отловить само событие у меня получается, но не пойму как обратиться к элементу что бы изменить css или класс.

    
    $(function() {    
    
       $("select_id").on("change", function() { 
    
            // Так
           $(this).css({"border-bottom-color" : "#ff0000"}); 
    
           // Или эдак
           $("select_id").css({"border-bottom-color" : "#ff0000"}); 
    
           setTimeout(function() { $("input, select").trigger("refresh"); }, 1)  
            
        });
    });  
    

    Буду очень признателен.

  15. Я все таки допетрил, что необходимо манипулировать стилями «обертки», а не к самого селекта.
    Проблема решилась так:

     $("#element_id-styler").addClass("myclass");  
  16. Здравствуйте.
    В какой-то момент времени перестали работать селекты на iPad (предположительно на всех MacOs). Список не выпадает никакой (ни стилизованный, ни системный). Ответа в комментариях не нашел. Спасибо.

  17. Как стилизовать селекты в jq datepicker после рефреша самого datepicker? У него нет события change

  18. Добрый день, подскажите как сделать другой вид у переключателей поле number когда +- по по сторонам?

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

  20. Всуё, теперь работает )

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