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 583)
  1. 1
    михаил

    http://joxi.ru/KAxXNwXt46pPwA
    в попап окно( подгружается на ajax) выдает длинный список без прокрутки. полосу прокрутки ставит на экран. как это решить?

  2. 3
    Igor

    Здравствуйте скажите пожалуйста есть ли возможность у дроп даун меню ширину делать динамически как и селекте например 200px, в li будут генерится часовые пояса у них названия длинные это ламает select, что бы текст которые не помещяется переносился на новую строку спасибо http://prntscr.com/h25tv8

  3. 5
    Alex

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

  4. 9
    Bear

    Здравствуйте, есть на сайте слайдер

    $(document).ready(function() {
     
     banner_int = '';
     $('#banner .slidee').css('width', $('#banner .slidee .banner_img').length * 100 + '%');
     $('#banner .slidee .banner_img').css('width', 100 / $('#banner .slidee .banner_img').length + '%');
     
     function set_banner_int() {
     banner_int = setInterval(function() {
     if ($('#banner .dot.active').next('.dot').length > 0) {
     $('#banner .dot.active').next('.dot').click();
     } else {
     $('#banner .dot').eq(0).click();
     }
     }, 5000)
     }
     
     function clear_banner_int() {
     clearInterval(banner_int);
     }
     $('#banner').mouseenter(function() {
     clear_banner_int();
     }).mouseleave(function() {
     set_banner_int();
     })
     set_banner_int();
     
     
     $('body').delegate('.navi .next', 'click', function(e) {
     e.preventDefault();
     if ($(this).parent().find('.dot.active').next('.dot').length > 0) {
     $(this).parent().find('.dot.active').next('.dot').click();
     } else {
     $(this).parent().find('.dot').eq(0).click();
     }
     })
     $('body').delegate('.navi .prev', 'click', function(e) {
     e.preventDefault();
     if ($(this).parent().find('.dot.active').prev('.dot').length > 0) {
     $(this).parent().find('.dot.active').prev('.dot').click();
     } else {
     $(this).parent().find('.dot').last().click();
     }
     }) 
     $('body').delegate('.navi .dot', 'click', function(e) {
     e.preventDefault();
     if (!$(this).hasClass('active')) {
     $(this).parent().find('.dot.active').removeClass('active');
     $(this).addClass('active')
     $(this).parent().parent().parent().find('.slider_cont').css('left', (($(this).data('page') - 1) * 100) * -1 + '%');
     }
     })
    })

    Если я нажимаю на Select и раскрывается список, то после смена картинки в слайдере список select автоматически закрывается и так со всеми стилизованными select`ами. А со стандартным не стилизованным select`ом такого не происходит.

  5. 10
    @

    Не работает установка атрибута checked на сам input[type=»checkbox»] с jQuery 3.2.1 ): Дохрена кода и стилей, а толку ноль. Переинициализация и прочие отложенные запуски не помогают. Автор, проверяй велосипед.

  6. 12
    Алексей

    Здравствуйте.
    Подскажите пожалуйста как быть.
    При выборе радиокнопки т.е. при клике по ней мне необходимо скрыть блок а другой показать. Я событие клика повесил на #optionsRadios3-styler но оно не срабатывает. Я так подозреваю что его перебивает событие другое т.е. событие даннго плагина.
    как сделать так чтобы второе моё событие тоже сработало?

    Код события клика

    $('#optionsRadios3-styler').click(function(){
    		$('#sp-1').css('display', 'none');
    		$('#sp-2').css('display', 'block');
    	});
  7. 24
    sp
    @

    Здравствуйте.
    Спасибо за плагин.
    Обновите пожалуйста v/2.0.2 для установки через bower_components
    Доступна на данный момент только v/2.0.0

  8. 26
    IgorVarn
    @

    Привет. А как вставить картинку напротив option? В демонстрации написано

    Класс, указаннный для option, передается свернутом селекту, благодаря чему мы в нем видим флаг.

    , так и сделал

    .color{
     background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LACMTA_Circle_Red_Line.svg/240px-LACMTA_Circle_Red_Line.svg.png)
     no-repeat 0 7px;
    }

    Но картинка накладывается на весь select.

  9. 30
    Pavel

    В мобильной версии выпадающие списке не выпадают, даже в демо-примере http://dimox.github.io/jQueryFormStyler/demo/

  10. 31
    Ярослав
    @

    Спасибо за отличный плагин! Не подскажете как можно сделать чтобы поле поиска в была так сказать «сверху». Не появлялась только когда нажать на селект и уже в выпадающем списке с ней работать, а чтобы она была сразу в поле селекта и при вводе данных появлялся уже выпадающий список?

  11. 33

    Пользуюсь плагином уже давно, но сегодня столкнулся с проблемой. Просидел полночи, пока не нашел причину. Такие вещи недопустимы:

    // если iOS, то не показываем выпадающий список,
    // т.к. отображается нативный и неизвестно, как его спрятать
    if (iOS) return;

    Нативный селект прячется элементарно.

  12. 34
    Пит

    Всем привет! Столкнулся с проблемой, мне нужно в выпадающем списке вставить дополнительный span, так как там есть текст и в некоторых словах подчеркнутый текст. Кто знает решение?

  13. 35
    Алекс Старый

    Привет всем!

    Есть одиночный select, в начале пустой.Потом ajax-ом в него добавляется порядка 1000 option.Ну и дальше — $(select).trigger(‘refresh’).Браузер думает пару секунд и все OK!

    Но имеются шустрые посетители, которые за это время успевают натыкать мышкой на другие взаимно связанные элементы формы.В итоге — полный дурдом.

    Не могу понять то-ли браузер долго перестраивает DOM, то-ли styler ‘refresh’ .Это — ладно, понятно , что нужно время.Но, как то можно заблокировать ввод(мышка,клава) для посетителя пока все не успокоится?

  14. 36
    Дмитрий

    Добрый день!
    У меня есть select, и на мобильных вообще не раскрывается, как решить проблему ???

  15. 37
    Александр

    Здравствуйте!

    Похоже это глюк!

    Столкнулся на реальном проекте с непонятной странностью.Попытался воспроизвести на demo(Примеры для плагина jQuery Form Styler).Получилось.

    jQuery Form Styler v1.7.8.
    В demo.js мняем строчки

    $('button.add-options').click(function() {
     var options = '';
     for (i = 1; i <= 5; i++) {
     options += '<option>Опция ' + i + '</option>';
     }
     $(this).closest('div.section').find('select').each(function() {
     $(this).append(options);
     }).trigger('refresh');
    });
    

    на

    $('button.add-options').click(function() {
    
     var section= $(this).closest('div.section');
     var select = section.find('select');
    
     section.hide();
     select.empty();
     select.attr('data-placeholder','---- Выберите ----');
     select.trigger('refresh');
    
     var options = '<option></option>';
     for (i = 1; i <= 5; i++) {
     options += '<option>Новая длинная опция ' + i + '</option>';
     }
    
     select.append(options);
    // section.show();
     select.trigger('refresh');
     section.show();
    });
    

    Общий смысл в том, что ajax-ом записать в скрытый пустой селект опции.Потом refresh.А только после этого показать селект.

    Если в последних строчках сначала show, потом refresh, то все нормально.
    Если сначала refresh, потом show, то обрезаются выбранные строчки.Примерно так:

    — Выберит…
    Новая длинн…

    Что делать?

  16. 39
    selipasha

    Dimox, спасибо за плагин, но у меня возникла проблема, в класс .jq-selectbox__trigger-arrow я поставил картинку со стрелочкой и хочу чтобы по клику на селект она делала оборот на 180 градусов, но дело в том, что селектор совершенно не реагирует на .click(function(). Помогите пожалуйста!

    $( ".jq-selectbox" ).click(function() {
     $(".jq-selectbox__trigger-arrow").css("transform", "rotate(180deg)");
    });
  17. 43
    selipasha

    И ещё вопрос, можно ли при помощи вашего плагина сделать чекбокс не в виде квадрата с галочкой, а как текст? Чтобы вместо галочки просто была обводка вокруг текста?

  18. 48

    У меня не стилизуется input[type=»file»]. Ни в CSS, ни в JS файлах я такого селектора не нашёл. Это у меня проблемы со зрением, или чего-то не хватает в скрипте?

  19. 50

    Извиняйте, разобрался

  20. 51
    Варвара

    Добрый день!
    могу ли я не подключать jquery.formstyler.theme.css чтобы написать свои стили а не переопределять их сверху?
    и можно ли редактировать jquery.formstyler.theme.css?

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