Главная JavaScript

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

  1. Здравствуйте.
    Есть такая конструкция

    <option id="set2" value="#map_block" onClick="setCenter2()" data-chained="Almetevsk">Нефтяников, 37</option>

    Однако, после применения стайлера, данный пункт списка перестает работать.
    Как неоднократно писали в комментариях нужно onClick заменить на onChange, но эффекта никакого это не дало.
    Я что-то делаю не так? Как заставить отрабатывать стилизованные пункты выпадающего списка?

  2. Здравствуйте. Подскажите пожалуйста, а как можно реализовать select сразу с input search, чтобы по клику на него выпадал список всех option’s. Вообщем, сделать такой select, только без стандартного блока selectbox__select и за место него input search с поиском по option’s.

    Пример ibb.co/kZoBen

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

    • Такой возможности нет.

      • Стал думать в сторону модификации уже выведенного на страницу текста посредством JS-скрипта. Не могу понять, как происходит сопоставление сформированных li-блоков и options исходного селекта. То есть подменив ul — li сформированные Вашим скриптом на ul — li — элементы включающие, например теги:

        <i></i> или </br>

        теряется связь c options (если не связь, то, скажем так, клик по новому li не приводит к клику по options который обрабатывается onchange).
        Подскажите в какую сторону копать?

  4. Как сделать drop_up наверх у простого селекта. Я просто тупой не могу разобраться. Что и где нужно дописать?

  5. К сожалению на днях, перестал работать одиночный селект на IOS, а точнее на Safari. Возможно подскажите решение?

    Проверял у себя на сайте и у вас на демо, с телефона и Chrome на ПК в режиме адаптивного дизайна под iPhone/iPad

  6. Замечено, что не работает при использовании. trigger ('refresh'), а без — мультиселект стилизуется.

  7. А есть какой то способ сделать на андроиде нативный выпадающий список, так же как на ios барабан появляется, при нажатии на стилизованный select?

  8. Подскажите, как быть если у тебя на странице два селекта, и у каждого свои стили.
    Простая конструкция $('select').styler (); тут определенно не поможет. Надо что-то добавить. Что?

  9. Здравствуйте.
    Подскажите пожалуйста в чем может быть проблема.
    У меня есть скрипт, который заносит сумму в поле input при выборе option в select.
    При стилизации вашим select перестает работать.

    webchikof.com
    На сайте нажмите на кнопку «рассчитать стоимость сайта».
    Заранее благодарю)

  10. Не получается для select применить disabled.
    Вообще, требуется, чтобы при первоначальной загрузке страницы второй из селектов был отключен, после выбора значения в первом и загрузки данных во второй, второй включился, но на первом же этапе проблема, disabled прописанное в селекте не отрабатывает (

  11. Вот написал точно такое же на нативном JS. Обратил внимание, что браузер не желает отображать текущее состояние свойств checked, selected. То есть console. log (element.checked) и console. log (element.selected) не выводит актуального состояния bool значения. Попутно загемороился с одиночным атрибутом, если указано не по системе Strict HTML, где надо прописывать атрибут selected="selected". Собственно, я думал, что jQuery говно и баг в ней. Написал на чистом JS — баг тот же. Но jQuery все равно говно. У нее в циклах вечно параша с функциями при переборке.

    Dimox, ты на каком браузере работаешь с версткой?

  12. Подскажите, при включении опции multiple у select они скрываются. Как продиагностировать, что не так?

  13. Добрый день! Я в jquery не сильна, но очень нужно реализовать вот это:
    Есть вот такая конструкция — jsfiddle.net/moireceptik/hp27xrdb/
    Задача: При выборе категории — выделить все подкатегории только у выбранной категории
    Сейчас я использовала ваш скрипт jsfiddle.net/Dimox/KgeSA/, но при выборе Категории № 1, отмечаются галочки абсолютно у всех категорий и подкатегорий. Что не правильно для моей задачи.
    Предполагаю что тут нужно использовать (this), но как и куда его вставить — это выше моего понимания.

  14. Наверное не совсем к Вам, но Страница v-gorod.com/_v/
    Браузеры — webkit для мобильных устройств

    prntscr.com/jx0r5zprntscr.com/jx0rdf — Не работает

    Меняем ориентацию prntscr.com/jx0rjw — работает

    Экспериментальным путем выяснил, что работоспособность зависит от положения относительно края браузера (устройства)

  15. Будут ли обновление плагина или автор забросил проект?

  16. Dimox, а че так редко пишешь? Может хоть за ноду упорешься? Там новые прослушки есть… Скучно, почитать некого стало. Все мозги растеклись… Даже над беспантовыми сеошниками уже не поржать даже. Соскакивай с jQuery ;)

  17. Как стилизовать стрелку у селекта.
    Я использовал font-awesome

    .jq-selectbox__trigger-arrow {
        top: 7px;
        width: 20px;
        height: 20px;
        font-size: 30px;
        border: none;
    
        &amp;::before {
          content: 'f107';
          font-family: 'FontAwesome';
        }
      }
    

    А как изменить при закрытии на стрелку в верх?

  18. Не работает выпадающий список, если зайти с Iphone, можно глянуть через dev tools на странице примеров

  19. долго бились, но так и не можем понять почему не работают селекты в iOS
    gruzovoy.ru/
    https://gruzovoy.ru/catalog
    не посмотрите, в чем может быть дело?

  20. Приветствую автора. Хороший плагин, но не хочет работать на iphone и в хроме при имитации iphone в панели разработчика. Есть ли способ это решить? Спасибо.

    • У меня есть только 4-й iphone с версией операционки 7.1.2. На нем все работает. В имитации селект не будет работать, так как это не реальное устройство. На реальном открывается нативный выпадающий список.

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