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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...

Полезные комментарии (10)
Комментарии (2 269)
  1. 1

    Недавно столкнулся с проблемой: часть страницы обновляется через ajax. Обновленные селекты без стилизации.
    Вроде понятно, что нужно вызвать метод .styler() повторно. Но вот как отловить момент обновления элемента. Сам механизм обновления через ajax заложен в CMS. Туда лезть нехорошо.
    В результате нашел довольно таки простое решение — прописать вызов метода в глобальных настройках ajax запросов:

    jQuery.ajaxSetup({complete: function(){jQuery("select").styler(); }}); 

    Может кому пригодится…

      • 3
        Серега

        Спасибо, пригодилось!
        Самое интересное, что пробовал этот код вставлять в конце ajax запроса — не работало, а заработало, если в начале.

        Ну т.е. например:
        1. Так не работало
        onclick=’my_function(); jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }}); ‘

        2. Так заработало
        onclick=’jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }}); my_function();’

        Если в коде, то соответственно, тоже в начале
        function my_function()
        {
        jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }});

        … далее код

  2. 4
    astik

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

    • 5
      Вячеслав

      Не спорю все будет красиво и не так грузить браузер, но грошь цена верстке которая сейчас фигово смотрится в ИЕ8, увы но такие реалии… к примеру Themeforrest уже отказался от поддержки ие8, а вот наши отечественные клиенты по прежнему считают что верстка под ие 8 показатель мастерства верстальщика и студии в целом отчасти с ними согласен. Бывают даже весельчаки которые просят ие 6 ))

      П.С. Автор спасибо за хороший плагин, очень кстати, все просто и доступно

  3. 6
    astik

    Чтобы не быть голословным! Я сделал украшения чекбоксов и радио с помощью псевдоэлементов в CSS. Идея не моя, где-то видел, уже не помню. Делается так.
    Заключаем input в div и добавляем label:

     <div class="switch">
    <input/>
    <label></label></div>

    Далее в css прописываем:

    .switch {
     position: relative;
    	display: inline-block;
    	top: -2px;
    	margin-right: 5px;
    }
    
    .switch input[type=checkbox],
    .switch input[type=radio]
     {
     position: absolute;
    	top: 3px;
    	left: -4px;
    	width: 30px;
    	height: 20px;
    	z-index: 100;
    	opacity: 0;
    	cursor: pointer;
    }
    .switch_layered label{
    	
    	width: 16px;
    	height: 16px;
    	border: 1px solid #888;
    	background: #F6F6F6;
    	box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
    	vertical-align: middle;
    	cursor: pointer;
    	display: inline-block;
    }
    
    .switch input:checked ~ label:before {
    	
     display: block;
    	content: "\f00c";
    	font-size: 16px;
    	line-height: 18px;
    	color: #30A720;
    	font-family: FontAwesome;
    }

    Я использовал FontAwesome для отмеченных чекбоксов, он работает только с :before

    Вот собственно и все. Стили, конечно, нужно поправить под конкретные нужды.
    Самое главное, нет проблем с обработкой onclick.

    Результат можно посмотреть у меня на сайте: http://pushpizza.ru/24-japan-menu

    PS В старых браузерах не работает, поэтому надо прописать в стилях для них не показывать новые чекбоксы, то есть сделать видимыми нативные.

  4. 7
    Ivan

    Использую плагин для стилизации select. При перезагрузке текущей страницы, select сохраняет выбранное ранее состояние. Как сделать чтобы он при перезагрузке страницы выбирал, как и положено, первый ?

  5. 10
     <input type="reset" />

    Визуально не сбрасывает настройки формы, хотя должен, юзать Api?

  6. 12

    Выложил новую версию плагина. Будет интересна тем, кто хотел поддержку плагинов валидации. Вот живой пример с использованием плагина jQuery Validation.

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

  7. 13
    Shimmy

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

    <html>
    	<head>
    		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    		<link rel="stylesheet" href="style.css" type="text/css" />
    		<link rel="stylesheet" href="jquery.formstyler.css" type="text/css" />
    		<script src="jquery-1.10.2.min.js"></script>
    		<script src="jquery.formstyler.min.js"></script> 
    		<script type="text/javascript">
    			(function($) {
    				$(function() {
    				$('input, select').styler();
    				})
    			})(jQuery)
    		</script>
    		<title>title</title>
    	</head>
    	<body>
    <select>
    					<option>-- Выберите --</option>
    					<option>Пункт 1</option>
    					<option>Пункт 2</option>
    					<option disabled>Пункт 3</option>
    					<option>Пункт 4</option>
    					<option>Пункт 5</option>
    				</select>
     </body>
    </html>
    

    С кнопкой, например, все получилось. Что я делаю не так?

  8. 20
    Константин

    Понравился скрипт! Один нюанс. Было бы замечательно если selectbox обладал поиском по содержимому, так же как chosen. Надеюсь вы добавите функцию поиска! =)

  9. 21
    Александр

    Здравствуй, не пойму где засада, сделал чекбокс «Выбрать все», но триггер работает лишь однажды на включение, в остальном только выключает все чекбоксы
    http://jsfiddle.net/57u3K/1/

  10. 24

    Выложил новую версию плагина. Добавил поиск в одиночном селекте.

  11. 25
    Евгений

    Во валидация заработала) теперь вообще нормуль. Спасибо.

  12. 26
    sdook1

    Планируется ли доработка мультиселекта а-ля Bootstrap Multiselect или что-то подобное?

  13. 28
    Mitia

    В версии плагина 1.4.6 не работает переключение радиокнопок в группе. После долгих мучений оказалось что если отсутствует обертка form, то кнопки не выключаются. В ранних версиях плагина было все хорошо :)

    • 29

      Логично же, что элемент формы должен находиться в теге form.

      • 30
        Mitia

        Чаще всего да. Однако допускается использовать любые элементы вне тэга form кроме

        input type=''submint"

        . Иногда это надо, например для пользовательского интерфейса. По крайней мере это требование надо отметить в примечаниях. Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.
        А вообще спасибо за плагин очень классный!

        • 31

          Любой элемент можно использовать вне формы:

          <form id="data"></form>
          <p><input placeholder="Ваше имя" name="user" form="data"></p>
          <p><input type="submit" value="Отправить форму" form="data"></p>

          Тут уже как посмотреть, но в вашем случаи можно просто допилить скрипт под конкретный сайт:
          после

          selectSmartPositioning: true

          добавить:

          ,radioParent: 'form'

          А

          radio.closest('form')

          заменить на:

          radio.closest(opt.radioParent)

          Ну и при инициализации скрипта указывать нужный селектор

          $.styler({radioParent: '.element'})
        • 32

          Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.

          Она и не должна влиять на ширину селекта. Такое же поведение и у нестилизованного селекта.

  14. 33
    Илья

    Установил плагин, но почему-то он работает только на поле «input type=»file»
    Остальные поля не оформляются. В чём может быть проблема.

  15. 35
    Илья

    Форма:

    <p>* поля обязательные к заполнению</p>
    <div>[[+fi.error.error_message]]</div>
    <form action="[[~[[*id]]]]" method="post"><input type="hidden" name="nospam:blank" value="" />
    <div><label for="name">Имя: </label> <input id="name" type="text" name="name:required" value="[[+fi.name]]" /> <span>[[+fi.error.name]]</span></div>
    <div><label for="name">Email: </label> <input id="email" type="text" name="email:email:required" value="[[+fi.email]]" /> <span>[[+fi.error.email]]</span></div>
    <div><label for="subject">Тема вопроса: </label> <input id="subject" type="text" name="subject:required:stripTags" value="[[+fi.subject]]" /> <span>[[+fi.error.subject]]</span></div>
    <div><label for="contact_attachment">Прикрепить файл: </label><em>(не обязательно)</em><br /> <input type="file" name="contact_attachment" value="[[!+fi.contact_attachment]]" /></div>
    <div><label for="message">Текст вопроса: </label><span>[[+fi.error.message]]</span> <br /> <textarea id="message" name="message:required:stripTags" rows="7" cols="55">[[+fi.message]]</textarea></div>
    <div><input type="submit" name="Submit" value="Отправить вопрос" /></div>
    </form>
    

    Плагин:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="jquery.formstyler.css" rel="stylesheet" />
    <script src=jquery.formstyler.js"></script>
    	<script type="text/javascript"> 
    (function($) { 
    $(function() { 
     
     $('input, select, textarea').styler(); 
     
    }) 
    })(jQuery) 
    
    • 36

      Читайте внимательно вначале статьи, что стилизует данный плагин. Из этого списка в вашей форме есть только input[file], все верно стилизовалось.

      А текстовые поля и кнопки стилизуются путем добавления вручную класса .styler. Плагином они не стилизуются, тут чистый CSS.

  16. 37
    Роман

    Подскажите, что нужно подправить, что бы в селекте искать с первой буквы (т.е. если пользователь нажимает M, то показываются только варианты на букву M). Сейчас ищет все вхождения. Спасибо.

  17. 42
    npofopr

    А как плагин заставить работать с fancybox?
    Fancybox открывается, а select не стилизуется… Видимо стилизацию надо запускать только после открытия окна?

  18. 44
    Сергей

    Имею проблему по ширине select. Она определяется всегда уже по ширине, чем требуется. То есть надпись режется (class jq-selectbox__select-text). Пришлось закоментировать в jquery.formstyler.js строку 376

    selectbox.width(el.outerWidth());

    Ширина определяется почти корректно и есть много глюков.. Помогите выйти из тупика. Заранее благодарен.

  19. 49
    lena

    Подскажите, пожалуйста, как быть.
    В коде файла jquery.formstyler.js — на чекбоксе есть событие onClick, например:
    checkbox.click(function() {
    if (!checkbox.is(‘.disabled’)) {
    if (el.is(‘:checked’)) {
    el.prop(‘checked’, false);
    checkbox.removeClass(‘checked’);
    } else {
    el.prop(‘checked’, true);
    checkbox.addClass(‘checked’);
    }

    А у меня в чекбоксе прямо прописано, что на onClick происходит некое событие:

    <input class="checksel" type="checkbox" id="ck_" onClick="SelectOne(this.checked, )" />

    Этот клик не срабатывает.
    Какой можно найти выход из этой ситуации?

  20. 52
    Denis

    В IE8 и ниже, виснет страница с одиночным select. Даже демо-страница «Одиночные селекты» http://dimox.github.io/jQueryFormStyler/demo/#select. Все остальные элементы работают.

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий