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 413)
  1. 1
    Никита
    @

    Здравствуйте! Нужна помощь. Пытаюсь получить значение select’а через val(), в консоли выводится сначала значение, а потом undefined — http://take.ms/vwPqD
    Пробую получить текст выбранного option( $(this).children().filter(‘:selected’).text() ) — сначала получаю значение, а потом пустую строку — http://take.ms/utHtr
    Отключаю плагин и таких проблем не наблюдается. Подскажите пожалуйста в чем причина? Спасибо!

  2. 4
    Мария
    @

    Добрый день!

    Подскажите, пожалуйста, как сделать раскрытие списка select на hover, а не при клике(по умолчанию)

  3. 9
    skreets
    @

    Жаль input[type=range] нету (((

  4. 10
    Олег

    здравствуйте! подскажите, пожалуйста, как правильно подключить formstyler в webpack?

    путь в пакете был указан неверно, так что я прописал алиас:

    'jquery-form-styler': 'jquery-form-styler/dist/jquery.formstyler.min.js'

    jquery сделан глобально через ProvidePlugin:

    new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery",
     "window.jQuery": "jquery"
     }),

    ошибка: Uncaught TypeError: $fs.styler is not a function

    все прочие jquery-плагины работают нормально

  5. 16
    Роман
    @

    Привет. Использую форм стайлер для селектов, на айфоне при клике присваивается класс focused и на этом взаимодействие заканчивается, селект не открывается. В чем может быть причина, вижу я не первый кто с подобным столкнулся

  6. 19
    Руслан

    Здравствуйте! Как при поиске по селекту сделать что бы группы не скрывались, если в группе есть хоть один подходящий результат? И как отключить поиск по названиям групп?

  7. 21
    Василий
    @

    Здравствуйте, как подключить плагин к Prestashop 1,6 стандартная тема? подключаю выкидывает ошибку:
    Failed to load resource: the server responded with a status of 404 (Not Found)

  8. 25
    Илья
    @

    Здравствуйте.
    У меня тупой вопрос: какие файлы плагина и куда загружать на сервере?
    Я загрузил два файла (jquery.formstyler.css и jquery.formstyler.min.js) из папки dist в папку jquery на сервере. И у меня ничего не работает.

  9. 28
    Ghost

    Подскажите что надо задать что-бы сократить текст в «option», как в «select» с точками?

  10. 31
    Геннадий


    FixBugWithSelectFirstOptionForJqueryFormStyler(only for simple select).
    Cуть бага в том, что не плагин не позволял выбрать 1 элемент из выпадающего списка.

    Ловим все клики по элементам выпадающего списка:

    setTimeout(function(){
     
     $('body').on('click', 'div.jq-selectbox__dropdown li.sel.selected', function (e) {
     e.preventDefault();
     
     if($(this).parents(':eq(2)').find('div.jq-selectbox__select div.jq-selectbox__select-text').is(':empty')){
     //если элемент не выбрался, то выбираем его насильно
     $(this).removeClass();
     $(this).click();
     }
     })
    },1000);
    
  11. 32
    dmiigozavr

    Здравствуйте. При ограничении выпадающего списка селекта по высоте и прописания ему overflow-y: scroll, список опции не прокручивается колесом мыши, только за ползунок. Как-то можно изменить?

  12. 34
    roman

    Dimox, подскажите, почему select-ы не работают на мобильных устройствах? Даже у вас на демке если открыть в отладчике и обновить страницу — jq-selectbox__dropdown — всегда display:none

  13. 37
    marchenkovdmitry

    Dimox, есть возможность обновить значение data-placeholder динамически? Пробовал разные варианты — не работает. Например:

    $("#js_get_obl").attr('data-placeholder',"новое значение").trigger('refresh');

    #js_get_obl — id селекта

    Что я неправильно делаю? Заранее спасибо.

  14. 39
    Сергей

    Dimox, добрый день. Подскажите пожалуйста, почему при установке Вашего плагина через npm подтягивается только версия 1.7.5, тогда как актуальная 2.0.1. Планируете ли вы актуализировать пакет в репозитории? Это было бы очень удобно, спасибо.

  15. 41
    Алексей
    @

    Спасибо за полезный плагин!
    Скажите пожалуйста есть ли возможность у input type=»number» сделать так чтобы количество не уходило в минус?

  16. 44
    svg

    Здравствуйте. Этот плагин работает на девайсах? В эмуляторе браузера — селект не открывается. ошибки в консоле нет.

  17. 46
    Александр

    Здравствуйте. Вопрос такой.
    Когда смотришь через эмулятор Google, то селект не открывается (display:block не ставится dropdown). Чтобы это увидеть, надо открыть эмулятор и страницу обновить.

    На iOS когда открываешь — отрабатывает стандартный селект системы. Можно ли как-то сделать так, чтобы открывался стилизованный?

  18. 48
    Стас
    @

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

  19. 50
    Алексей
    @

    Привет, подскажите, как можно скрыть 1 элемент в селекте? что бы в выпадающем списке от не отображался , а в самом селекте был? http://joxi.ru/Rmz1EabhW7pkXr http://joxi.ru/v29a3EXSGX7v32

  20. 52
    Сергей

    Добрый день!
    Dimox, проверьте на странице с примерами «Селект с шириной 200 пикселей, имеющий пункт с длинным текстом» — это третий сверху пример:
    http://dimox.github.io/jQueryFormStyler/demo/#select
    Если кликать на самом селекте — все нормально, но если кликнуть справа от него, то появляется нативный выпадающий список.
    Как это побороть — к селектору «.jq-selectbox select» нужно добавить «width: 100%»
    По идее при абсолютном позиционировании достаточно было бы и того, что сейчас: left: 0; right: 0;
    Но получается, что без «width: 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');
    	}
    });
    
Ваш комментарий