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
    Вадим

    Добрый день! В последней версии Вашего плагина есть проблема с radio-button. Конкретно, если есть список радио-кнопок, то можно все радио-кнопки выделить как checked. Т.е. с предыдущего статус активности не удаляется.
    Взял отсюда же отдельный плагин для радио-кнопок — с ним все работает нормально, в той же ситуации.

  2. 3

    Выложил новую версию — 1.6.

  3. 4

    Вы бы загрузили свой скрипт на скриптовые облака… jsdelivr и cdnjs. Очень круто было бы загружать скрипт оттуда, а не со своего хостинга.

  4. 6
    Ivan

    А как перехватить click при нажатии на select? Я пробовал вешать обработчик и на обертку и на сам селект (вешал через .on(‘click’,function(){…})), но ничего не выходит.

  5. 8
    Александр

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

  6. 11
    Ильсур

    Хоть выше и писали но мне никак не удается отследить нажатие на на псевдо селект.
    Например так

    $('.jqselect.класс-селекта ul li:eq(1)').click(function() {
    alert('Ёху');
    });
    

    Никак не работает, подскажите пожалуйста как отслеживать изменения, в идеале сразу и атрибут value узнавать у option’ов. Заранее спасибо!

  7. 15
    Денис

    Можно ли принудительно раскрывать select вверх?

  8. 18
    Алексей

    Добрый день, подскажите —
    Если пользователь выбрал одно из значений селекта — можно ли как-то сделать его не активным? Чтобы пользователь не смог снова выбрать это значение?

  9. 24
    Алексей

    Добрый день!

    Подскажите, а если форма загружается динамически. Как ее стилизовать?

  10. 26
    Михаил

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

  11. 28
    Алексей

    Подскажите пожалуйста — как сделать — чтобы после выбора значения с переходом на другую страницу(ссылка в value) в select — в selecte оставалось выбранное значение? Заранее благодарен!

  12. 31
    Михаил

    Dimox, благодарю вас за решение проблемы с отслеживанием клика по чекбоксу. Искал по click , а надо было по change :)
    Столкнулся с проблемой небольшой.
    Имеем список select , формируется на PHP .
    На выходе имеем ширину выпадающего списка в 20px , что существенно меньше. скрин
    Подозреваю, что прогружается сайтлер раньше, чем генерируется выпадающий список, но может и неправ. В какую сторону копать ?

  13. 34
    Тишина

    Спасибо за прекрасный плагин!

  14. 35
    Игорь

    Привет. Хочу поблагодарить автора, спасибо за такой отличный плагин. Но есть одна проблема, которую совсем не давно обнаружил, нельзя выбрать один и тот же элемент несколько раз в теге . На моем сайте при добавления кода в комментарий, можно выбрать подсветку синтаксиса, например я выбрал php, второй раз я уже не могу выбрать этот пункт. Срочно нужно решение, очень не хочется отказываться от этого плагина, так как он отлично встал на моем сайте, и очень хорошо подошел под дизайн bootstrap.

  15. 38
    Михаил

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

  16. 39
    Александр

    Можно ли убрать всплывающую подсказку у input поля выбора файла? По умолчанию подсказка отображает имя выбранного файла или текст «Файл не выбран».

  17. 42
    Дмитрий

    Уже достало… Хороший плагин с богатыми возможностями, как говорится то, что нужно. Но уважаемые создатели нужно было бы объяснить и привести примеры кода, как отлавливать те или иные события…Или каждый должен догадываться, проводить эксперименты…

    Я вод никак не могу отловить в одиночном селекте значениt выбранного option, тот код, что здесь в обсуждении $(‘select’).val(); срабатывает только при загрузке страницы и все, а что же дальше.

    Написано используйте псевдоселекты ну так дайте примеры покажите, как это работает. Если плагин нарушает методы отлова событий, то наверное нужно показать и дать примеры , как это делать.

  18. 44
    Дмитрий

    Проблема такова. Мне нужно получить значение выбранного селекта. К примеру есть такой код:

    <div id="blokdiv"></div>
    <form id="forma">
    <select data-placeholder="--пользователи--">
    <option></option>
    <option value="1">Вася Иванов</option>
    <option value="2">Егор Петров</option>
    <option value="3">Даша Васильева</option>
    </select>
    </form>
    

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

    $('.jq-selectbox li').click(function(){ 
    $result= $('.jq-selectbox li').val();
    $('#blokdiv').text($result); 
    }); 
    

    На этот код реакция есть, то есть по клику к примеру по «Даше Васильевой» возвращает 0, также, как и по » Васе Иванову» тоже 0. При этом ноль возвращается только при первом клике, при последующих выборах никакой реакции.
    Пробовал, как здесь советуют

    $('select').val(); 
    

    Результат такой же один раз 0 и до свидания.
    Хотелось бы получить объяснения, как правильно отловить события и получить значение при чем не единожды, ведь пользователь может передумать к примеру и выбрать другой пункт, сохранять последний выбор в переменную и при отправке формы уже им пользоваться( обрабатывать)

  19. 46
    Дмитрий

    Большое спасибо за помощь! А псевдоселект… Ваш же ответ и прочитал)

    «Dimox5 дней назад(ответ на коммент Ivan)
    Клик происходит только на псевдоселекте, поэтому на нем и нужно отлавливать.

  20. 48
    Игорь

    Админ, ты не хочешь ответить на 1466 пост?

    • 49
      Дмитрий

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

      • 50
        Игорь

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

        • 51
          Дмитрий

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

          • 52
            Игорь

            Все отлично открывается, но при повторном нажатии ничего не происходит, нажал = select закрылся, в форму ничего не добавилось. При отключенном плагине все работает. Да показывать собственно нечего, простой select и 6 option.

            document.write('<span class=""><select data-placeholder="-- Выберите --" id="boxfz" name="boxfz" onchange="BBCodeAddTagSuntaxCode(\'boxfz\',\''+a+'\');" title="Синтаксис"><option value="text" >Text</option><option value="php">php</option><option value="xml">xml</option><option value="html">html</option><option value="js">js</option><option value="sql">sql</option></select>')

            Фнкция

            function BBCodeAddTagSuntaxCode(d,a){text=document.getElementById(a);boxs=document.getElementById(d);var c="[suntax="+boxs.value+"]";var b="[/suntax]";boxs.options[0].selected=true;BBCodeAddTag(c,b,a)}function BBCodeAddTagSelect(d,a){text=document.getElementById(a);boxs=document.getElementById(d);var c="["+boxs.value+"]";var b="[/"+boxs.value+"]";boxs.options[0].selected=true;BBCodeAddTag(c,b,a)}
            • 53

              Все просто. Событие onchange срабатывает только в том случае, когда меняется выбранный option. А при повторном клике на уже выбранный option, как в вашем случае, событие onchange не происходит.

              Вместо селекта сделайте кнопки для каждого пункта.

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