jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

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

Главная › jQuery и JavaScript
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 лет 6 месяцев назад

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

  2. Mich
    7 лет 6 месяцев назад

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

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

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

  3. Сергей
    7 лет 5 месяцев назад

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

    $(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. Alex
    7 лет 5 месяцев назад

    Большое спасибо, за отличную работу! Давно искал подобное решение, а найдя ваше — сразу же его применил во многих своих сайтах. :)

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

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

  5. NickFrost
    7 лет 4 месяца назад

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

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

  6. Евгений
    7 лет 4 месяца назад

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

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

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

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

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

  7. Raul
    7 лет 4 месяца назад

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

  8. Андрей
    7 лет 4 месяца назад

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

  9. Фаим
    7 лет 4 месяца назад

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

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

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

  10. Алекс
    7 лет 4 месяца назад

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

  11. Алекс
    7 лет 4 месяца назад

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

  12. Сергей
    7 лет 4 месяца назад

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

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

  13. Роман
    7 лет 3 месяца назад

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

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

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

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

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

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

  14. Виктор
    7 лет 3 месяца назад

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

    Дмитрий, подскажите, можно ли как-то манипулировать стилями или классами селекта на событие 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. Виктор
    7 лет 3 месяца назад

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

     $("#element_id-styler").addClass("myclass");
  16. kunicz
    7 лет 3 месяца назад

    Здравствуйте.
    В какой-то момент времени перестали работать селекты на iPad (предположительно на всех MacOs). Список не выпадает никакой (ни стилизованный, ни системный). Ответа в комментариях не нашел. Спасибо.

  17. Vadim Ivanov
    7 лет 3 месяца назад

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

  18. Кирилл
    7 лет 3 месяца назад

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

  19. Сергей
    7 лет 3 месяца назад

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

  20. Сергей
    7 лет 3 месяца назад

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

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