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 263)
  1. 1
    Михаил

    Привет! Плагин хороший, судя по возможностям и быстроте настройки. Вопрос касается Range объекта. Плагин не обновляет стиль данного типа инпут поля?

  2. 4
    Сергец

    Здравствуйте! Есть ли у плагина возможность в выпадающем селекте выбирать активный option с помощью jquery?

  3. 6
    Сергей

    Спасибо. Я новичок по этому сразу не нашел решение. Использовал для селекта $(«option»).attr(«selected», «selected»), но на стилизованный плагин это не влияло. Тогда в демке заметил .trigger(‘refresh’). $(«option»).attr(«selected», «selected»).trigger(‘refresh’). Все заработало. Спасибо за плагин!

  4. 7
    Vlad

    А как решать проблему что на Iphone селект не разворачивается ????

  5. 11
    sp

    Здравствуйте
    Спасибо, за плагин и его поддержку.
    Бывает довольно часто, что нужно обозначить родительскому блоку класс, что его ребенок чекбок к примеру имеет статус «.styler.checked». Есть ли возможность указать в настройках плагина эту опцию? Если нет, хотел бы вас попросить добавить в следующем обновлении плагина.
    Заранее спасибо.

  6. 13
    Алексей

    Добрый день!
    Использовал Радиокнопки, но срабатывание происходить только на выбор.
    Т.е., например, выбираю пункт 1….появляется точка, потом выбираю пункт 2, но переключения не происходит — остаются выбранными и пункт1, и пункт2.
    Подскажите что не так? Опыта у меня мало или это баг в отработке плагина?
    Заранее благодарен.

  7. 15
    Sandz

    при form.reset() сбрасываются состояния элементов, но не их внешний вид (дивы не снимают класс checked). Вручную конечно убирается (снимать в js классы), но было бы неплохо, если бы эта функция была реализованна. Также эмуляция клика через js по скрытому резет-баттону не помогает.

  8. 16
    Виктор

    Каким образом получить значение из селекта? val() не срабатывает. Потому как плагин не устанавливает selected для option. Какой-то аццкий косяк:((( Или я торможу?

  9. 20
    Алекс

    Подскажите как «сплющить» по вертикали свернутый селект? не нахожу где высоту можно указать.

  10. 24
    Никита

    А можно ли как-нибудь завязать ваш плагин и кастомный скролл? Хочу сделать чтобы в дропдауне селекта был красивый скролл, не получается( Не подскажете как быть? Спасибо!

  11. 26
    teslaS

    Перестает работать динамическое изменение цены. Dimox, помогите пожалуйста

  12. 31
    Сергей

    Добрый день, подскажите пожалуйста- как сделать чтобы определенные radiobutton не стилизовались? я как-то спрашивал, но найти ответ не вышло :(

  13. 36
    Александр

    Как убрать открытие select вверх? почему-то находясь вверху сайта селект выводит опшены не в низ а вверх

  14. 38
    Денис

    Всем доброго времени суток! Подскажите как ограничить высоту выпадающего select меню, применил к родителю , не сработало.

  15. 40
    Евгений

    как отключить на андроиде?

  16. 42
    oleh.lavrik

    Как сделать выборку всех чекбоксов одним главным чекбоксом в таблице ну и обратную функцию если главный снят чекбокс то и все в таблице сняты.

  17. 44
    Dennis

    Подскажите, как сделать, чтобы при клике по чекбоксу, для label также добавлялся класс «checked»? Это предусмотрено в плагине?

  18. 46
    Владислав

    Спасибо за отличный плагин, я начинающий веб-разработчик (самоучка) возник такой вопрос, можно ли твой плагин как-то интегрировать с плагинами для wp???
    конкретный пример — есть плагин wpcc (конструктор калькулятора) — у его полей формы не корссбраузерное отображение…. я просто даже примерно не понимаю как бы твой плагин скрестить с wpcc

  19. 48
    Алексей

    отличный плагин.
    не хочет выпадать селект на ipad и даже на демо сайте.
    есть решение?

  20. 54
    Павел

    Доброго времени суток! Хотел уточнить такой вопрос , можно ли после стилизации вашим плагином , сделать редактируемый select , что то на подобии ?
    Заранее спасибо!

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