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 614)

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

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

      • <!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>

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

        • <!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>
          

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

          • Поскольку уже указано selectSearch:true, то data-search="true" не нужно.

            • Здравствуйте ! Я сам первый сайт делаю верней магазин, и не как не могу добавить размер к товару , чтоб покупатель мог по клику выбрать нужны размер. А при добавлении атребута просто отображаются как надпись. Думаю дело в шаблоне , а вот как справится третий день сижу и неразберусь !? Что сделать нужно. Плиз помогите!

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

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

  5. Скажите, я что то упустил. События типа 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. Как сделать что бы к определенному selecty не применялось оформление?

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

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

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

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

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

  10. С какого-то момента, не можем определить точно, на строку $(‘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. Я добавляю опцию selectSmartPositioning:true, хоть она и должна работать по дефолту, но селект открывается только вниз, на странице ваших примеров я тоже не увидела позиционирования, может я не понимаю как оно должно работать. Спасибо за ответ

  12. …….

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

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

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

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

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

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

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

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

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

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

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

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

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

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