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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Дмитрий
    8 лет 4 месяца назад

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

  2. Mich
    8 лет 4 месяца назад

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

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

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

  3. Сергей
    8 лет 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. Alex
    8 лет 3 месяца назад

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

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

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

  5. NickFrost
    8 лет 2 месяца назад

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

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

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

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

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

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

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

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

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

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

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

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

  9. Фаим
    8 лет 2 месяца назад

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

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

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

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

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

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

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

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

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

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

  13. Роман
    8 лет 2 месяца назад

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

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

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

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

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

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

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

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

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

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

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

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

  17. Vadim Ivanov
    8 лет 1 месяц назад

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

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

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

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

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

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

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

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