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 320)
  1. 1
    Dinar

    скроллбар еще бы кастомизировать, ваще клево будет

  2. 2
    Александр

    Подскажите как пользоваться дата-атрибутами, к примеру что в раскрывающемся списке появилось поле поиска

      • 4
        Александр
        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../form/jquery.formstyler.css">
        <script src="../js/jquery-1.12.0.min.js"></script>
        <script src="../form/jquery.formstyler.min.js"></script>
        <script>(function($) {
        $(function() {
        
         $('select').styler();
         $('input').attr('class','styler');
        
        });
        })(jQuery);</script>
        
        
        </head>
        <body>
        <select data-search="true">
        	<option value="1">Option 1</option>
        	<option value="2">Option 2</option>
        	<option value="3">Option 3</option>
        	<option value="4">Option 4</option>
        	<option value="5">Option 5</option>
        </select>
        <input type="text"></input>
        
        </body>
        </html>

        Вот такой код сделал и поле поиска не появляется, подскажите как сдлелать

        • 5
          Александр
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="../form/jquery.formstyler.css">
          <script src="../js/jquery-1.12.0.min.js"></script>
          <script src="../form/jquery.formstyler.min.js"></script>
          <script>
          $(function() {
           $('select').styler({selectSearch:true, selectSearchLimit:5});
           $('input').attr('class','styler');
          });
          </script>
          
          
          </head>
          <body>
          <select data-search="true">
          	<option value="1">Option 1</option>
          	<option value="2">Option 2</option>
          	<option value="3">Option 3</option>
          	<option value="4">Option 4</option>
          	<option value="5">Option 5</option>
          </select>
          <input type="text"></input>
          
          </body>
          </html>
          

          Все разобрался, заработало!!!

  3. 8
    Юрий

    Здравствуйте, спасибо за прекрасный плагин, а как можно отключить в Android стилизацию выпадающего и оставить стандартный нативный выпадающий как в обычном селекте, заранее спасибо!

  4. 12
    styler user

    Подскажите пожалуйста как скрыть нативный селект на IOS, чтобы отображались стилизованные пункты dropdown.

  5. 14
    osben

    Скажите, я что то упустил. События типа change не всплывают ?

    	$('.styler').styler();
    	$(document).on('change', '[name^="amounts"]', function(event) {
    		event.preventDefault();
    		alert();
    	});
    
    <input name="amounts" class="styler" type="number" min="1" max="10" step="1" value="4"/>
    
  6. 15
    Антон

    Как сделать что бы к определенному selecty не применялось оформление?

  7. 18
    Николай

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

    <div class="jq-selectbox__dropdown" style="position: absolute; width: 21.8182px; left: 0px; top: auto; display: block; height: auto; bottom: auto;">

    В чем может быть проблема?

  8. 20
    Anton

    Как для отловить изменение value когда меняют кнопками +-

  9. 21
    Доминатор

    Не срабатывает клик на сафари ios !!! не открывается список!!!
    http://alfabank.by/

  10. 23
    Сергей

    С какого-то момента, не можем определить точно, на строку $(‘select’).styler(); стала выдаваться ошибка, после чего весь последующий скрипт перестает работать. Пока сделали

     
    if ( $('select').styler == 'function' ) {
     $('select').styler();
     }
    

    Скрипт в целом начал работать, но select-ы стали стандартными. Используем версию jQuery Form Styler v1.7.4

    Вызов styler() производится в файле scripts.js . Используются следующие скрипты:

    jquery-1.11.3.min.js
    jquery-cookie-1.4.1.min.js
    bootstrap.min.js
    jquery.formstyler.js
    jquery.pickmeup.min.js
    jquery.magnific-popup.min.js
    jquery.maskedinput.js
    jquery.md5.js
    scripts.js

    Наверняка, с плагином все в порядке и проблемы в нашем скрипте. Не могли бы вы подсказать, в чем может быть дело и что предпринять

  11. 25
    Юлия

    Я добавляю опцию selectSmartPositioning:true, хоть она и должна работать по дефолту, но селект открывается только вниз, на странице ваших примеров я тоже не увидела позиционирования, может я не понимаю как оно должно работать. Спасибо за ответ

  12. 27
    Антон

    …….

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

  13. 28
    Роман

    Приветствую! Не наблюдалось такой проблемы, что в дуэте с плагином опросов от камы, form-styler перестает работать, если в плагине камы включить опцию -> Включить механихм работы с плагинами кэширования. Может быть есть решение?
    Использую input type=»radio».

  14. 29
    Андрей

    Здравствуйте! Скажите как сбросить селект к дефолтному (первоначальному) значению?

    $('select').val('');
    $('select').prop('selectedIndex',0);
    

    Все это не работает. Точнее работает, только список ul с li элементами не переключается.
    Может эта тема уже всплывала? Дайте тогда ссылку. Спасибо

  15. 32
    sarkis

    Здравствуйте. Подскажите. как можно решить проблему : в момент перезагрузки страницы или при переходе отображается стандартный селект,а как только документ готов, то ваш скрипт срабатывает .. Это все происходит за долю секунды, но иногда заметно

  16. 34
    vasaeps3

    Скрипт крутой. Очень нравится. Но есть баг

    Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.

    В chrome не отрабатывает. В ff отрабатывает на ура.
    Как полечить?

  17. 35
    Сергей

    Здравствуйте! Прекрасный и легкий плагин)
    У меня только один вопрос: я хочу сделать в select пункты с иконками. Первое, что приходит на ум — динамическое добавление стиля к каждому пункту.
    Только как это реализовать, не подскажите?

  18. 38
    Владимир

    Добрый день! Подскажите пожалуйста есть ли возможность НЕ уходить в отрицательные значения?

  19. 41
    Виктор

    Добрый день! Скажите пожалуйста, исправлена ли проблема с selectSmartPositioning?

  20. 43
    Дмитрий

    А почему в IE 11 чекбокс срабатывает только по двойному клику? Причем если кликать на label то работает нормально.

  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');
    	}
    });
    
Ваш комментарий