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>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 605)

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

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

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

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

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

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

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

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

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

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

  9. Добрый день!

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

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

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

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

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

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

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

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

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

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

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

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

    
    <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 и до свидания.
    Хотелось бы получить объяснения, как правильно отловить события и получить значение при чем не единожды, ведь пользователь может передумать к примеру и выбрать другой пункт, сохранять последний выбор в переменную и при отправке формы уже им пользоваться( обрабатывать)

    • Правильно будет так:

      
      $('select').change(function(){
      	$result = $('select').val();
      	$('#blokdiv').text($result);
      });
      

      Псевдоселект — это всего лишь эмуляция, все события нужно отлавливать на оригинальном селекте.

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

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

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

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

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

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

          • Все отлично открывается, но при повторном нажатии ничего не происходит, нажал = 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)}
            • Все просто. Событие onchange срабатывает только в том случае, когда меняется выбранный option. А при повторном клике на уже выбранный option, как в вашем случае, событие onchange не происходит.

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

Ваш комментарий