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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Плагин «jQuery Form Styler» Подключение плагина ...

Полезные комментарии (10)
Комментарии (2 601)
  1. 1
    Вадим

    Решил тут обновить с версии 1.3.8

    и вылезло несколько проблем

    1) почему-то все селекты стали display:block, т.е несколько на одном уровне не расположишь (решается через css)
    2) в селекте проблема с короткими значениями, например 10,15,20,25, их не видно, раньше такой проблемы не было

  2. 16
    Максим

    у меня по-чему то все содержимое прячется, http://cs607919.vk.me/v607919585/f64/YAHHXqlk8zs.jpg (скрин)
    почему, не подскажете? и как это можна по править?

  3. 19
    Игорь

    Вопрос — если у select style=’display:none;’ — после применения Вашего плагина — он станивится видимым …. как побороть?

  4. 22
    Игорь

    И еще — Ваш плагин не работает если на сайте используется FancyBox — есть идеи как побороть?

  5. 25
    Dare89

    плагин прекрасный, но есть одна не очень приятная особенность, хотелось бы каким-нибудь доп элементом убирать файл из input[type=file], если человек передумал. И еще, если выбрать файл, а потом еще раз нажать выбор файла и отменить, placeholder пропадает.

  6. 28

    Выложил новую версию (1.4.8).

  7. 29
    Vladimir

    Доброго дня! Есть ли возможность настроить ваш чудесный плагин таким образом, что бы селект всегда выпадал только вниз, независимо от положения на старнице? Сейчас до середины видимой области страницы селект выкидывает список вверх, без поля поиска, а находясь ниже середины, вниз, что лучше настроить (в моем случае) по умолчанию.
    Спасибо.

  8. 34
    Vladimir

    Обращался с вопросом о селекте выпадающем вверх (хотел настроить что бы выпадал только вниз)- вопрос снят. Просто изменил максимальную высоту ul в jq-selectbox__dropdown, и, для мох целей, все отлично. Спасибо. Очень все гибко.

  9. 35
    Alex

    Уважаемый автор. Этим плагином пользуюсь еще со времен его отдельного существования плагина для селектов. Частенько приходилось немного его править под свои нужды (часть того что я когда то делал уже реализована в плагине). Но вот почему вы решаете какой должен быть элемент(block или inline-block). Переназначить можно только через important. Было бы хорошо чтобы вы сделали просто дополнительный цсс файл где прописали эти стили и их с легкостью можно было менять.

  10. 38
    Евгений

    Спасибо за прекрасный плагин. Раньше он подглючивал на iPad, открывалась два меню (на сайте и на iPad), но сегодня обновился и все стало на 5+. Спасибо Вам!

  11. 39
    Vasiliy

    У меня отказывается работать Ваш селектор. Это из-за ajax. Как побороть?

    Вот тут.

    • 40
      Vasiliy

      Забыл добавить, что здесь Radio неправильно работают.

      Недавно столкнулся с проблемой: часть страницы обновляется через ajax. Обновленные селекты без стилизации.
      Вроде понятно, что нужно вызвать метод .styler() повторно. Но вот как отловить момент обновления элемента. Сам механизм обновления через ajax заложен в CMS. Туда лезть нехорошо.
      В результате нашел довольно таки простое решение — прописать вызов метода в глобальных настройках ajax запросов:

      jQuery.ajaxSetup({complete: function(){jQuery(«select»).styler(); }});

      Может кому пригодится…

      Тут уже кто-то писал, но я понятия не имею, куда это прописывать и решит ли это мою проблему. Может кто-то подсказать?

  12. 42
    serzhei

    Подскажите, есть ли возможность анимировано переключать чекбоксы, пробовал с transition и background-position что-то не выходит)

  13. 44
    Алексей

    Ширина select(а именно .jq-selectbox__select-text) рассчитывается по первому option, поэтому длинные option превращаются в три точки … Даже если указывать класс с шириной больше чем самый длинный option, все равно три точки. Но такое не всегда, иногда все нормально. И у Вас в примере тоже все ок, как так?

    <select>
    <option>шт</option>
    <option>упак.</option>
    </select>
    
  14. 49
    Евгений

    jQuery Form Styler v1.3.8.1
    На сайте запускается так:

    <script type="text/javascript">
    	jQuery(function(){				
    		$('select').styler();
    	});
    </script>

    Но необходимо чтобы один селект оставался обычным.
    Вариант с инициализацией по одному не подходит, на странице может быть разное количество селектов и только на определенной, один селект нужно оставить стандартным.

  15. 53
    Вадим

    просто применен шрифт OpenSans, и уже не лезет

  16. 56
    Вадим

    нажатие enter переключает чекбоксы, так не должно быть

  17. 62
    Иван

    Объясните плз никак не могу понять
    есть 4 тега селект:

    <select #id="sel1"></select>
    <select #id="sel2"></select>
    <select #id="sel3"></select>
    <select #id="sel3"></select>

    Задаю в css епрвым двум ширину 400px а вторым двух 600px

    .sel1,.sel2{width:400px}
    .sel3,.sel4{width:600px}

    Но ширина не менятеся, как исправить?чтобы у первых 2-ух была 400 а вторых двух 600 пикселей

  18. 66
    Юрий

    Добрый день Dimox.
    Пожалуйста помогите.
    У меня на странице фильтры которые обновляются на ajax.
    И получается так что после обновления чекбоксы и радио кнопки становятся простыми, как можно сделать что бы они постоянно обновлялись. Движок prestashop.

    Пробовал сделать вот так:

    (function($) { 
    $(function() { 
     $('input, select').styler(function(e) { 
     e.preventDefault(); 
     $('input:checkbox').attr('disabled', true) 
     .trigger('refresh'); 
     }) 
     
    }) 
    })(jQuery) 
    

    Не сработало

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