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

  1. На сколько я понимаю, в скрипте нет защиты от 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. Очень важный момент — Стилизация кнопок и текстовых полей. Возможно есть смысл показать примером в разделе — Подключение плагина.
    После кода:

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

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

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

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

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

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

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

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

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

    • Благодарю за плагин, он очень хорош.

      Указанный кусок кода в селектах с количеством пунктов более 1000 приводит к тому что страница браузера зависает на 3-5 сек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • Я не настолько опытен в JavaScript и jQuery, чтобы сделать подобные вещи. В таком случае рекомендую отказаться от использования плагина, тем более, что радиокнопки и чекбоксы можно оформлять на чистом CSS.

      • Сделал стилизацию радио и чекбоксов CSS, отключил активацию этих элементов в плагине. Теперь в Андроиде все работает как надо. =)

        Заметил багу плагина в IE 9. Селекты при загрузке страницы принимают ширину 100%, а не по содержимому опций. При наведении указателя мыши на селект его ширина уменьшается по размеру выбранной опции (в подписи селекта). Как только указатель покидает активную область ширина селекта вновь растягивается на всю доступную.

  18. Сергей
    5 лет назад

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

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

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

  20. Николай
    5 лет назад

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

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