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

Полезные комментарии (12)
Комментарии (2 223)
  1. 1
    Егор

    Классная вещь. Спасибо

  2. 2
    zox

    Добрый день, почему-от radio не переключается, выделяются все хотя name один и тот же: http://jsfiddle.net/maLmtmjm/1/

  3. 4
    Фарит

    Уважаемый Dimox. Пофиксите, пожалуйста баг c Mac OS, а то из-за этого бага, мои коллеги отказываются его использовать((

  4. 8
    Сан Саныч

    Привет,

    Имеем селектор на drupal с множественным выбором опций. Скрипт его оформил в радио-кнопочки, всё красиво. Выбрать несколько опций можно, удреживая клавишу ctrl. Необходимо, чтобы был мультивыбор нескольких радио-кнопок и через клик (как если бы это были чекбоксы).

    Dimox, подскажите, пожалуйста, пример или куда смотреть. Спасибо.

  5. 14
    Санек

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

    • 15

      В конце функции, которая добавляет/изменяет второй селект, запустите для этого селекта .styer().

      • 16
        Санек

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

        скрипт chained:

        (function(a){a.fn.chained=function(b,c){return this.each(function(){var c=this;var d=a(c).clone();a(b).each(function(){a(this).bind("change",function(){a(c).html(d.html());var e="";a(b).each(function(){e+="\\"+a(":selected",this).val()});e=e.substr(1);var f=a(b).first();var g=a(":selected",f).val();a("option",c).each(function(){if(!a(this).hasClass(e)&amp;&amp;!a(this).hasClass(g)&amp;&amp;a(this).val()!==""){a(this).remove()}});if(1==a("option",c).size()&amp;&amp;a(c).val()===""){a(c).attr("disabled","disabled")}else{a(c).removeAttr("disabled")}a(c).trigger("change");if(typeof obUpdate=="function"){a(':input[name^="option"]',c).change(function(){obUpdate(a(this),useSwatch)})}if(typeof updatePx=="function"){a(':input[name^="option"]',c).change(function(){updatePx()})}});if(!a("option:selected",this).length){a("option",this).first().attr("selected","selected")}a(this).trigger("change")})})};a.fn.chainedTo=a.fn.chained})(jQuery)
        

        код где он применяется в шаблоне:

        <?php if ($chained_options) { ?>
        <script type="text/javascript"><!--
        <?php foreach ($chained_options as $chained_option) { ?>
        $('#option-<?php echo $chained_option['child']; ?>').chained('#option-<?php echo $chained_option['parent']; ?>');
        <?php } ?>
        //--></script>
        <?php } ?>
  6. 24
    Matvey

    День добрый!
    Такая проблема, в IE8 и ниже поле select’а не отображается ни выбранный пункт, ни стрелка, ни картинка вместо стрелки.
    В чем проблема может быть?

  7. 26
    Сан Саныч

    Предыдущий комментарий не актуален. Разобрался.

    Всё просто.
    Всего-навсего нужно было использовать правило зажатого ctrl на клик по опции (li).

    li.filter(':not(.disabled):not(.optgroup)').click(function(e) { el.focus();
    var clkd = $(this);
    if (clkd.is('.selected')) clkd.removeClass('selected first');
    else clkd.addClass('selected first'); clkd.siblings().removeClass('first');
    

    Спасибо за плагин и за отзывчивость.

  8. 27
    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.

  9. 32
    Кара

    Возможно ли в селекте элементам выставлять цвет?

  10. 34
    Russ_lan

    В документации:
    текст по умолчанию в одиночном селекте; отображается, когда у первой опции отсутствует значение:

    <option></option>

    это когда нужно установить свой плейсхолдер у select

    На это ругается валидатор w3c

    Element option without attribute label must not be empty.

  11. 36
    Никита

    Здравствуйте, столкнулся с проблемой необходимости закрытия select’а при ресайзе/скролле окна, как это можно сделать при использовании вашего плагина? Кстати стандартный селект во всех этих случаях закрывается автоматически, возможно стоит это реализовать в самом плагине.

  12. 39
    Никита

    Еще при использовании плагина часто возникает проблема когда выпадающий список у select обрезается какими то внешними контейнерами с overflow:hidden. Если убрать overflow:hidden нет возможности, то это становится проблемой. Решал подобную задачу изменением позиционированния всего кастомизированного селекта на fixed и расчетом координат где был селект. Может быть вы знаете еще какое нибудь решение подобной проблемы? Стандартный селект в подобных случаях не обрезается.

  13. 41
    Никита

    Есть какой то метод который позволяет открыть стилизованный select из js? Как я понимаю обычный селект из js нельзя открыть просто так.

  14. 43
    Петр

    Как сделать селект изначально неактивным, и как его потом активировать (например после нажатия на кнопку какуюто). Добавление класса «disabled» на старте ничего не дает(

  15. 48
    Anna

    А что нет параметра, чтобы при заданной ширине селекта длинные option переносились на новую строку? Плохо, что значения обрезаются

  16. 50
    Нурбек

    Столкнулся с такой проблемой, когда в select только один option, не выбирается этот option внутри стилизованного select. Так и остается надпись «Выберите». Кто знает в чем проблема?

  17. 51
    Алексей

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

  18. 55
    Никита

    Здравствуйте! Плагин классный, пользуюсь постоянно, но встала задача сделать селект не с текстом, а с картинками, можно как-нибудь такое провернуть? Спасибо!

  19. 57
    KOs

    После установки плагина страница стала загружаться 26 секунд (без плагина 0,86 секунд)…

  20. 58

    Плагин отлично работает, элементарно подключается.
    Dimox на моём сайте самый большой содержит более 1200 штук

    …..
    0.8
    0.9
    1.0
    1.1
    1.2
    1.3
    1.4
    1.5
    и так далее…

    Проблема в скорости загрузки эффектов плагина. Страницы — любые грузятся в среднем 40-55 секунд. Есть ли решение данной проблемы?

  1. 1

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

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

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

  2. 2
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  3. 3

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  4. 4

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  5. 5

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  6. 6
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  7. 7
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  8. 8

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  9. 9
    Фарит
    		(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, стилезуйте на свой вкус.

  10. 10

    Посмотрите, какой у вас общий родительский тег для этих инпутов, и укажите его в опции wrapper.

    Пример:

    <div class="radio-buttons">
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    	<label><input type="radio" value="" name="radioset" /> Radio 1</label>
    </div>
    
    $('input:radio').styler({
    	wrapper: 'div.radio-buttons'
    })
    
  11. 11
    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.

  12. 12

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });