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 602)
  1. 1
    Алексей

    Доброго времени.
    Начинаю только изучать Angular js, он не хочет дружить с вашим плагином. А он мне очень нравиться, я уже очень долго только ним стилизую. Возможно ли найти решение этой проблемы?

    • 5
      Гоша

      Здравствуйте. А с jQuery v2.1.1 Стайлер не может корректно работать?
      Тут столкнулся с такой проблемой

      $('#add_image').click(function () {
      	$('<input type="file" name="my_image[]" class="styler" /><br>').appendTo('#more_images_div').styler().fadeIn('slow');
      	return false;
      });

      Ну тут все понятно. При клике на кнопку в ДИВ добавляется инпут для загрузки файла. Но не смотря на return false страница тут же обновляется, естественно уже без новодобавленного инпута. Убирал эту часть .styler() все работает, но инпуты естественно не стилизуются, что меня не устраивает. Да и вообще вот эта строка запускающая стайлер

      $('input, select').styler();

      В консоли дает ошибки, и все что ниже нее уже не выполняется. Подскажите, что же делать? jQuery v2.1.1 нужен как воздух, т.к. только на нем нормально работает не менее нужный мне планин FullCalendar. Заранее спасибо.

  2. 8
    Andrew

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

    Спасибо.

  3. 10
    Сергей

    Здравствуйте, очень нравится Ваш плагин, но иногда появляются проблемы которые самостоятельно решить никак не могу :(
    подскажите пожалуйста как быть с этим рабочим скриптом, но когда включаю стилизацию, то он перестает работать :(

    jQuery(".domainreginput").hide();
    jQuery(".domainoptions input:first").attr('checked','checked');
    jQuery("#domain"+jQuery(".domainoptions input:first").val()).show();
    jQuery(document).ready(function(){
     jQuery(".domainoptions input").click(function(){
     jQuery("#domainresults").slideUp();
     jQuery(".domainreginput").hide();
     jQuery("#domain"+jQuery(this).val()).show();
     });
    });
    function checkdomain() {
     var domainoption = jQuery(".domainoptions input:checked").val();
     var sld = jQuery("#"+domainoption+"sld").val();
     var tld = '';
     if (domainoption=='incart') var sld = jQuery("#"+domainoption+"sld option:selected").text();
     if (domainoption=='subdomain') var tld = jQuery("#"+domainoption+"tld option:selected").text();
     else var tld = jQuery("#"+domainoption+"tld").val();
     jQuery("#loading3").slideDown();
     jQuery.post("cart.php", { a: "domainoptions", sld: sld, tld: tld, checktype: domainoption, ajax: 1 },
     function(data){
     jQuery("#domainresults").html(data);
     jQuery("#domainresults").slideDown();
     jQuery("#loading3").slideUp();
     });
    }
     $('input:radio').styler({ 
     wrapper: 'div.domainoptions' 
     }) 
    

    Вот верстка:

    <!-- меню выбора, по клику появляется соответсующий блок и скрываются другие-->
    <div><input type="radio" name="domainoption" value="incart" />Use..</div>
    <div><input type="radio" name="domainoption" value="register" />Register..</div>
    <div><input type="radio" name="domainoption" value="transfer" />Transfer..</div>
    <div><input type="radio" name="domainoption" value="owndomain" />I will use my existing..</div>
    <div><input type="radio" name="domainoption" value="subdomain" />Use a sub..</div>
    
    <!--скрытые блоки, появляются по выбору соответствующей радиокнопке -->
    <div class="domainreginput" id="domainincart">...</div>
    <div class="domainreginput" id="domainregister">...</div>
    <div class="domainreginput" id="domaintransfer">...</div>
    <div class="domainreginput" id="domainowndomain">...</div>
    <div class="domainreginput" id="domainsubdomain">...</div>
    
  4. 14
    Dmitry

    Здравствуйте! Не приходит атачмент в параметрах при использовании плагина. Хотя на второй форме все нормально. Не скажите куда копать?

  5. 17
    Илья

    Здравствуйте
    а можно ли к селекту подключить плагин jscrollpane, для оформления полосы прокрутки в списке

  6. 19
    Dikkiy

    Подскажите пожалуйста, а как в нем изменить высоту select? (height)
    Нужно чтобы поля были пошире, и что то я запутался в этом css… :(

  7. 20
    Dikkiy

    И как применить это не ко всем формам, если их несколько на странице?

  8. 24
    Андрей

    Подскажите как избавится от надписи «Выберите…» в селектах. Облазил весь код но так и не нашёл где. Пробовал менять 31 строку в файле jquery.formstyler.js

    selectPlaceholder: 'Выберите...',
    

    — не помогло. Хелп плиз.

  9. 27
    Игорь

    Как повесить событие на jq-selectbox___not-found?

  10. 32
    Майя

    Здравствуйте. В моей форме один select меняет свое значение в зависимости от второго. Модель такая:

    <form>
    <select name="street" onChange="MkHouseValues(this.selectedIndex)">
    <option value="не выбрана">Не выбрана</option>
    <option value="">Вариант 1</option>
    <option value="">Вариант 2</option>
    <option value="">Вариант 3</option>
    </select>
    <select name="house">
    <option value="не выбрана">Не выбрана</option>
    </select> 
    </form>

    Без плагина работает все четко. Подключила плагин — форма стала красивой, а вот селекты шевелятся, но путают значения. Наверняка я что-то неправильно прописала здесь:
    $(function() {
    $(‘select’).styler();
    $(‘select’).change(function(e) { $(‘select’).trigger(‘refresh’); });
    });

    Помогите, пожалуйста, правильно подключить плагин.

  11. 39
    Майя

    Скажите, а как задать для select ширину? Пробовала прописывать в .jq-selectbox__select , и в самой форме — что-то ничего не получается.

  12. 41
    Ростислав

    Разработчик — ты реальный красавчик.
    Открыл для себя твой плагин и он безупречен.
    Спасибо тебе огромное
    +100500 тебе в карму))

  13. 42
    alex

    Здравствуйте.
    Возможно — это Вам пригодится.
    Нужно добавить в jquery.formstyler.css после 245 строки

    .jq-selectbox li:first-of-type:hover,
    .jq-selectbox li.selected:first-of-type {border-radius: 3px 3px 0 0;}
    .jq-selectbox li:last-of-type:hover,
    .jq-selectbox li.selected:last-of-type { border-radius: 0 0 3px 3px;}

  14. 43
    Майя

    Здравствуйте.
    Вот здесь я тестирую плагин http://autoinfa.com/kasko/FormStyler/example2.php
    Первые два селекта связаны между собой функцией. Для селектов я задала стиль:

    .jq-selectbox.focused .jq-selectbox__select {
     outline:3px solid #FFCC33;
    }

    Проблема № 1. В FireFox и Opera — в первом селекте не закрепляется outline. В IE закрепляется и в первом, и во втором селекте одновременно — получается 2 выделенных поля.

    Проблема № 2. В IE , в option появляются неожиданные сокращения. Попробуйте выбрать «Англия», город «Манчестер» — это только в IE.
    Как это можно исправить?

  15. 46
    Dron

    как сделать чекбокс select all?

  16. 47
    Сергей

    Здравствуйте.
    Дмитрий, спасибо за плагин и поддержку над ним.
    Есть небольшая просьба в помощи, как его применить к также с популярным плагином «jQuery.validationEngine» ( http://posabsolute.github.io/jQuery-Validation-Engine ).
    Не могли бы вы предоставить пример так как вы написали это для плагина «jQuery Validation»?
    Заранее благодарен, за любую помощь?

  17. 49
    Ростислав

    Добрый день.
    При установке data-placeholder, открывающийся список промотан в самый конец.
    как Установить так, что бы список был самого начала при раскрытии?

  18. 52
    Александр

    Как ограничить добавление полей для выбора файлов, например до 3

  19. 53
    volkoff

    .jq-selectbox__trigger-arrow

    как ему прописать стили, при наведении на select ?

    Спасибо

  20. 56
    Вячеслав

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

    if ($(".code input[type=checkbox]").is(":checked") == true) {
     code = 4;
     } else {
     code = 0;
     }
    

    не работает

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