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 380)
  1. 1
    Max

    На сколько я понимаю, в скрипте нет защиты от XSS:
    для кода типа

    <select>
    <option value="6" aaa="#ff0000">&amp;lt;script&amp;gt;alert(222)&amp;lt;/script&amp;gt;</option>
    </select>

    мы получим выполнение кода в <script>.
    Как я понимаю, решает проблему замена в строке 232 кода

    li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + '">'+ option.eq(i).text() +'</li>';

    на

    li = '<li' + dataJqfsClass + dataList + ' class="' + liClass + optionClass + '">'+ option.eq(i).html() +'</li>';
  2. 3
    Олег

    Очень важный момент — Стилизация кнопок и текстовых полей. Возможно есть смысл показать примером в разделе — Подключение плагина.
    После кода:

    $('form').validate({ 
     invalidHandler: function() { 
     
     setTimeout(function() { 
     $('input, select').trigger('refresh'); 
     }, 1) 
     
     } 
    }); 

    Написать:
    Для стилизации кнопок и текстовых полей, надо в этих кнопках и текстовых полях задать
    класс «styler». Ну, как-то так.
    Пример:

    <input type="text" class="styler"/>

    Это бы очень секономило нервы и время людям которые «первый раз»)), но мне так точно.)

  3. 5
    Федор

    Стилизованый select всплывает поверх других активных элементов страницы (в случае наложения активных элементов на select). Манипуляции с z-index проблему не решают, select все равно выше. Как решить проблему? Спасибо!

  4. 9
    Руслан

    Можно ли добавить опцию placeholder для селекта ?

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

    Добрый день.
    Подскажите, как сделать, чтобы начали работать стили для .jq-file__browse:hover?
    Просто нужно стилизовать кнопку при наведении.

  6. 16
    Alex

    При количестве опций селекта выше 1000 блок определения ширины селекта вызывает большую задержку по времени. Не могли бы Вы переделать этот фрагмент. Все остальное просто замечательно. Заранее Вам благодарен. Алексей.

    // определяем самый широкий пункт селекта
    //if (l.innerWidth() > liWidth1) {
    // liWidth1 = l.innerWidth();
    // liWidth2 = l.width();

  7. 18
    Олег

    el.off(‘.styler’).parent().before(el).remove();

    Производительность ни к черту :) Создали 500 элементов, и ради того что бы программно изменить значение, мы удаляем их и пересоздаем заного ?

    Когда по сути нужно задать всего лишь значение val() и обновить окошко с текстом.
    Селекты по 300 + элементов блокируют браузер при обновлении.

    http://joxi.ru/Xy_cU4wyTJCCY6U-_Ik
    вот статистика.
    количество элементов —
    511
    132
    7

  8. 20
    Сергей

    Добрый день. Спасибо за отличный плагин. Есть вопрос. У меня поле для выбора файла является мультизагрузочным. И когда я применяю плагин, он пишет не количество загруженных файлов, а списком все файлы, которые были выбраны. Можно ли это исправить?

  9. 21
    Ростислав

    Добрый день. Подскажите, а есть ли возможность отображать мультиселект в точности, как одиночный?

  10. 23
    Shoot

    Добрый день как задать ширину селекта? Читаю комменты с самого начала , по ходу вы отсылаете всех читать http://dimox.name/jquery-form-styler/?cp=1#comment-15525 но у меня по этой ссылке открывается эта страница.
    Где посмотреть про стилизацию?

  11. 26
    c1n1k

    как раскрыть селект через js?

  12. 28
    c1n1k

    https://dimox.github.io/jQueryFormStyler/demo/ поломалось что-то

  13. 30
    Алексей
    @

    как можно сделать, чтобы список в select всегда вверх открывался?
    в selectSmartPositioning такого выбора нет :(

  14. 33
    Олег

    Есть один момент.

    								var liWidth1 = 0,
    										liWidth2 = 0;
    								li.each(function() {
    									var l = $(this);
    									l.css({'display': 'inline-block', 'white-space': 'nowrap'});
    									if (l.innerWidth() > liWidth1) {
    										liWidth1 = l.innerWidth();
    										liWidth2 = l.width();
    									}
    									l.css({'display': 'block'});
    								});
    

    Полностью бессмысленный код, который увеличивает время отработки скрипта в двое.
    Добавляем в листинг стилизации селектапеременную кешируюшую текущий стилизируемый элемент (например ххххх). Удаляем весь код выше. Пишем вместо всего выше
    liWidth1 = ххххх.innerWidth();
    liWidth2 = ххххх.width();
    Эффект тот же, производительность на 50 процентов быстрее.

  15. 36
    Олег

    Так же не забываем
    // прячем оригинальный селект
    el.css({
    position: ‘absolute’,
    left: 0,
    top: 0,
    //width: ‘100%’,
    height: ‘100%’,
    opacity: 0
    });
    комментируем ширину селекта. что бы функции выше нормально отработали

  16. 37
    copenhagen

    Было бы отлично, если добавить в библиотеку подсветку/выделение значений по-умолчанию, то есть тех, которые выбираются при form.reset. При редактировании и внесения изменений в большие формы, было бы удобно для выпадающих списков и чекбоксов/радио знать куда внесены изменения.

  17. 38
    Froda

    Классный плагин, спасибо Большущее!!! Единственное — было бы здорово учесть какие-либо параметры, позволяющие увеличить быстродействие и экономить ресурсы устройства. Чтобы можно было выбирать функциональность или быстрота и экономия ресурсов (видел предложения по увеличению производительности в комментах, ущемляющие функционал). У мя на странице около 150 чекбоксов (выбор городов и т.п.) и около 150 опций селекта. Плагин загружает андроид браузер 4.0 так, что при тапе на любой селект изображение страницы из браузера пропадает. =) А с таким браузером больше 6% трафика ходит.

  18. 47
    Сергей

    Классый плагин, а на мобилках работает — iPhone, iPod Touch, and Android ?

    Сейчас активно ищу плагин для адаптивок.

  19. 53
    Froda

    Вопрос! Предположим один из селектов при загрузке страницы спрятан в div display:none. При клике по ссылке div получает display: block, но на селекте в этом случае не отображается подпись (т.е. опции внутри есть, но в закрытом состоянии выглядит как пустой блок). Можно это как-то вылечить?

  20. 60
    Николай

    Возникла проблема с клонированием input type=file с помощью clone(). Я клонирую полностью стилизованный формстайлером input, со всеми дополнительными тегами, при этом меняя вручную значение jq-file__name. Клонированные поля добавляют новые файлы правильно, но в jq-file__name не показывается название файла. В чем может быть проблема? trigger(‘refresh’) не помогает.

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