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. Здравствуйте.
    Есть такая конструкция

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

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

    • onChange нужно вешать на select, а не на option. На демо-странице есть такой пример.

      • О! Как же я не заметил. Спасибо.

        Если не трудно, подскажите, как этим одним onChange заменить onClick прописанных в сотне option?

        
        <option value="#map_block" onClick="setCenter1()" data-chained="Almaty"> Щепкина,  35А</option>
        <option value="#map_block" onClick="setCenter2()" data-chained="Almetevsk"> Нефтяников, 37</option>
        <option value="#map_block" onclick="setCenter3()" data-chained="Arhangelsk"> Садовая, 21</option>
        
        
        
        • У вас на каждом пункте уникальное название функции. А надо делать одну общую функцию, повешенную на select, и уже через нее работать с пунктами.

          • Спасибо.
            Применил следующий вариант.

            
            <script type="text/javascript">
            	$(function() {
            		$('#servis').on('change', function() {
            			var n = this.value;
            			if (n == "setCenter_1") setCenter1();
            		})
            	});
            </script>
            <select class="styler" id="servis">
                <option value="setCenter_1" data-chained="Almaty"> Щепкина,  35А </option>
            </select>
            
    • Спасибо! Отличный плагин. Использовал с WordPress Contact Form 7, отлично сработало

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

    Пример https://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 перестает работать.

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

    • В чужих скриптах мне не разобраться.

      • Скрипт заносит данные в поле input text, через обычный select всё работает и на ios работает.
        Еще заметил, что если выбрать что-то в select и потом нажать на checkbox, то данные заносятся в поле input text.
        Возможно не хватает какого-то обновления в select.
        Сможете натолкнуть на решение проблемы или где копать?

  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 не сильна, но очень нужно реализовать вот это:
    Есть вот такая конструкция — https://jsfiddle.net/moireceptik/hp27xrdb/
    Задача: При выборе категории — выделить все подкатегории только у выбранной категории
    Сейчас я использовала ваш скрипт http://jsfiddle.net/Dimox/KgeSA/, но при выборе Категории № 1, отмечаются галочки абсолютно у всех категорий и подкатегорий. Что не правильно для моей задачи.
    Предполагаю что тут нужно использовать (this), но как и куда его вставить — это выше моего понимания.

  14. Наверное не совсем к Вам, но

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

    http://prntscr.com/jx0r5z -> http://prntscr.com/jx0rdf — Не работает

    Меняем ориентацию http://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
    https://gruzovoy.ru/
    https://gruzovoy.ru/catalog
    не посмотрите, в чем может быть дело?

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

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

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