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

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

    Спасибо за скрипт.
    Добавляю динамически в select пункты, после refresh(), в хроме нормально, в IE10 список выпадает после двойного нажатия, в IE8 после нажатия появляется и сразу исчезает.
    Если создать обычный селект, то все нормально и в IE8

  2. 3
    Павел

    А как сделать destroy этому стайлеру есть ли такая функция?

  3. 5
    yuliya

    Добрый день,
    А можно какой-либо пример на следующую ситуацию — 3 селекта. При выборе в одном добавляются пункты во втором, при выборе второго добавляются пункты в третьем. (страна, регион, город). Заранее спасибо.

  4. 6
    Сергей

    После ajax-a слетает.

  5. 7
    Николай

    Группа select’ов, содержимое последующего зависит от выбора предыдущего. Подгружается через ajax. После подключения jQuery Form Styler селекты перестают обновляться.

    В остальном плагин качественный и удобный в использовании.

  6. 9
    Дмитрий

    Здравствуйте! Спасибо за плагин, очень пригодился.
    Стилизую селект во всплывающем окне, которое может закрыться если щёлкнуть вне его границ. Проблема в том, что если в этом окне открыть стилизованный элемент, то при щелчке по всплывающему окну он не закроется, при щелчке вне границ — закроется окно. Как сделать так, чтобы при щелчке внутри окна селект закрывался? Спасибо.

  7. 13
    Ростислав

    У checkbox не срабатывает событие onclick, если отключаю $(‘input, select’).styler(); все норм…

  8. 15
    ALEX

    Добрый день, подключаю также как написано выше(http://prntscr.com/3ihfap) — но появляется сообщение http://prntscr.com/3ihepv — делаю на Mac ,убираю инициализацию http://prntscr.com/3ihf3r — сообщение не появляется, почему так?

  9. 19
    Bomb

    На IOS не работает.

  10. 22
    Фокс

    Если radio-группа лежит вне тега form — не работает снятие состояния с элементов группы.

  11. 24
    Alexandr

    Дмитрий, добрый день.
    При раскрытии списка, а затем клике по месту вне выпавшего списка callback onSelectClosed вызывается количество раз, зависящее от количества стилизованных элементов с помощью плагина. А При выборе из списка какого-либо пункта — лишь один раз. Так и задумано?

  12. 26

    Багрепорт: при стилизации <input type="file" multiple /> отображает название только последнего из выбранных файлов.
    Проверил в хроме и ФФ на маке, но, думаю, это должно быть видно во всех браузерах.
    За скрипт спасибо:)

  13. 28
    Виталий

    Добрый день! Подскажите, в чем может быть проблема. Установил, все работает, только при загрузке страницы на секунду появляется нестилизованный список, только через секунду становится таким, каким он и должен быть с вашим плагином.

  14. 35

    Здравствуйте. Скажите пожалуйста как сделать, чтобы при выборе города из селекта сама вкладка с этим городом запоминалась? http://www.perevoz24.org/catalog/rubrics/uborka-musora&city=Белгород если ссылка вот такого типа в адресной строке, то сама вкладка соответственно должна быть Белгород. Помогите пожалуйста разобраться, в jQuery плохо шарю(((

  15. 39

    Выложил новую версию — 1.5.2.

  16. 40
    Максим

    А как можно заблокировать выполнение открывающего списка? Ну то есть к примеру — есть ajax и мне не надо что бы показывался список пока ajax не вернет результат?!

  17. 42
    Дмитрий

    Хороший плагин, но в ‘use strict’ mode много ошибок, в основном связанных со вложенным определением функций.
    Проверь код с помощью jshint, увидишь кучу ошибок и варнингов.

  18. 47

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

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

  19. 48
    Гость

    Не подскажите в какой строчке обработка события закрытие селекта при открытие другого селекта?

  20. 50
    Гость

    Спасибо, за оперативный предыдущий ответ.
    Можно селекту задать ширину 100%?

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