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

  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. На нем все работает. В имитации селект не будет работать, так как это не реальное устройство. На реальном открывается нативный выпадающий список.

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