Главная 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. joxi.ru/KAxXNwXt46pPwA
    в попап окно (подгружается на ajax) выдает длинный список без прокрутки. полосу прокрутки ставит на экран. как это решить?

  2. Здравствуйте скажите пожалуйста есть ли возможность у дроп даун меню ширину делать динамически как и селекте например 200px, в li будут генерится часовые пояса у них названия длинные это ламает select, что бы текст которые не помещяется переносился на новую строку спасибо prntscr.com/h25tv8

  3. Добрый день, есть ли возможность прокручивать выпадающий список к выбранному элементу при вводе значения с клавиатуры? Спасибо.

  4. Здравствуйте, есть на сайте слайдер

    $(document).ready(function() {
     
        banner_int = '';
        $('#banner .slidee').css('width', $('#banner .slidee .banner_img').length * 100 + '%');
        $('#banner .slidee .banner_img').css('width', 100 / $('#banner .slidee .banner_img').length + '%');
     
        function set_banner_int() {
            banner_int = setInterval(function() {
                if ($('#banner .dot.active').next('.dot').length > 0) {
                    $('#banner .dot.active').next('.dot').click();
                } else {
                    $('#banner .dot').eq(0).click();
                }
            }, 5000)
        }
     
        function clear_banner_int() {
            clearInterval(banner_int);
        }
        $('#banner').mouseenter(function() {
            clear_banner_int();
        }).mouseleave(function() {
            set_banner_int();
        })
        set_banner_int();
        
     
        $('body').delegate('.navi .next', 'click', function(e) {
            e.preventDefault();
            if ($(this).parent().find('.dot.active').next('.dot').length > 0) {
                $(this).parent().find('.dot.active').next('.dot').click();
            } else {
                $(this).parent().find('.dot').eq(0).click();
            }
        })
        $('body').delegate('.navi .prev', 'click', function(e) {
            e.preventDefault();
            if ($(this).parent().find('.dot.active').prev('.dot').length > 0) {
                $(this).parent().find('.dot.active').prev('.dot').click();
            } else {
                $(this).parent().find('.dot').last().click();
            }
        })     
        $('body').delegate('.navi .dot', 'click', function(e) {
            e.preventDefault();
            if (!$(this).hasClass('active')) {
                $(this).parent().find('.dot.active').removeClass('active');
                $(this).addClass('active')
                $(this).parent().parent().parent().find('.slider_cont').css('left', (($(this).data('page') - 1) * 100) * -1 + '%');
            }
        })
    })

    Если я нажимаю на Select и раскрывается список, то после смена картинки в слайдере список select автоматически закрывается и так со всеми стилизованными select`ами. А со стандартным не стилизованным select`ом такого не происходит.

  5. Не работает установка атрибута checked на сам input[type="checkbox"] с jQuery 3.2.1): Дохрена кода и стилей, а толку ноль. Переинициализация и прочие отложенные запуски не помогают. Автор, проверяй велосипед.

  6. Здравствуйте.
    Подскажите пожалуйста как быть.
    При выборе радиокнопки т. е. при клике по ней мне необходимо скрыть блок, а другой показать. Я событие клика повесил на #optionsRadios3-styler, но оно не срабатывает. Я так подозреваю что его перебивает событие другое т. е. событие даннго плагина.
    как сделать так чтобы второе моё событие тоже сработало?

    Код события клика

    $('#optionsRadios3-styler').click(function(){
    		$('#sp-1').css('display', 'none');
    		$('#sp-2').css('display', 'block');
    	});
  7. Здравствуйте.
    Спасибо за плагин.
    Обновите пожалуйста v/2.0.2 для установки через bower_components
    Доступна на данный момент только v/2.0.0

  8. Привет. А как вставить картинку напротив option? В демонстрации написано

    Класс, указаннный для option, передается свернутом селекту, благодаря чему мы в нем видим флаг.

    , так и сделал

    .color{
      background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/LACMTA_Circle_Red_Line.svg/240px-LACMTA_Circle_Red_Line.svg.png)
      no-repeat 0 7px;
    }

    Но картинка накладывается на весь select.

  9. В мобильной версии выпадающие списке не выпадают, даже в демо-примере dimox.github.io/jQueryFormStyler/demo/

  10. Спасибо за отличный плагин! Не подскажете как можно сделать чтобы поле поиска в была так сказать «сверху». Не появлялась только когда нажать на селект и уже в выпадающем списке с ней работать, а чтобы она была сразу в поле селекта и при вводе данных появлялся уже выпадающий список?

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

    // если iOS, то не показываем выпадающий список,
    // т.к. отображается нативный и неизвестно, как его спрятать
    if (iOS) return;

    Нативный селект прячется элементарно.

  12. Всем привет! Столкнулся с проблемой, мне нужно в выпадающем списке вставить дополнительный span, так как там есть текст и в некоторых словах подчеркнутый текст. Кто знает решение?

  13. Привет всем!

    Есть одиночный select, в начале пустой. Потом ajax-ом в него добавляется порядка 1000 option. Ну и дальше — $(select).trigger ('refresh').Браузер думает пару секунд и все OK!

    Но имеются шустрые посетители, которые за это время успевают натыкать мышкой на другие взаимно связанные элементы формы. В итоге — полный дурдом.

    Не могу понять то-ли браузер долго перестраивает DOM, то-ли styler 'refresh' .Это — ладно, понятно, что нужно время. Но, как-то можно заблокировать ввод (мышка, клава) для посетителя пока все не успокоится?

  14. Добрый день!
    У меня есть select, и на мобильных вообще не раскрывается, как решить проблему ???

  15. Здравствуйте!

    Похоже это глюк!

    Столкнулся на реальном проекте с непонятной странностью. Попытался воспроизвести на demo (Примеры для плагина jQuery Form Styler).Получилось.

    jQuery Form Styler v1.7.8.
    В demo. js мняем строчки

    $('button.add-options').click(function() {
        var options = '';
        for (i = 1; i <= 5; i++) {
            options += '<option>Опция ' + i + '</option>';
        }
        $(this).closest('div.section').find('select').each(function() {
            $(this).append(options);
        }).trigger('refresh');
    });
    

    на

    $('button.add-options').click(function() {
    
        var section= $(this).closest('div.section');
        var select = section.find('select');
    
        section.hide();
        select.empty();
        select.attr('data-placeholder','---- Выберите ----');
        select.trigger('refresh');
    
        var options = '<option></option>';
        for (i = 1; i <= 5; i++) {
            options += '<option>Новая длинная опция ' + i + '</option>';
        }
    
        select.append(options);
    //    section.show();
        select.trigger('refresh');
        section.show();
    });
    

    Общий смысл в том, что ajax-ом записать в скрытый пустой селект опции. Потом refresh. А только после этого показать селект.

    Если в последних строчках сначала show, потом refresh, то все нормально.
    Если сначала refresh, потом show, то обрезаются выбранные строчки. Примерно так:

    --- Выберит…
    Новая длинн…

    Что делать?

  16. Dimox, спасибо за плагин, но у меня возникла проблема, в класс .jq-selectbox__trigger-arrow я поставил картинку со стрелочкой и хочу чтобы по клику на селект она делала оборот на 180 градусов, но дело в том, что селектор совершенно не реагирует на. click (function (). Помогите пожалуйста!

    $( ".jq-selectbox" ).click(function() {
      $(".jq-selectbox__trigger-arrow").css("transform", "rotate(180deg)");
    });
  17. И ещё вопрос, можно ли при помощи вашего плагина сделать чекбокс не в виде квадрата с галочкой, а как текст? Чтобы вместо галочки просто была обводка вокруг текста?

  18. У меня не стилизуется input[type="file"]. Ни в CSS, ни в JS файлах я такого селектора не нашёл. Это у меня проблемы со зрением, или чего-то не хватает в скрипте?

  19. Извиняйте, разобрался

  20. Добрый день!
    могу ли я не подключать jquery.formstyler.theme.css чтобы написать свои стили, а не переопределять их сверху?
    и можно ли редактировать jquery.formstyler.theme.css?

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