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 357)
  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. 47
    Владислав

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

  19. 49
    Алексей

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

  20. 55
    Павел

    Доброго времени суток! Хотел уточнить такой вопрос , можно ли после стилизации вашим плагином , сделать редактируемый 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');
    	}
    });
    
Ваш комментарий