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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Плагин «jQuery Form Styler» Подключение плагина ...

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

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

    • Здравствуйте. А с jQuery v2.1.1 Стайлер не может корректно работать?
      Тут столкнулся с такой проблемой

      $('#add_image').click(function () {
      	$('<input type="file" name="my_image[]" class="styler" /><br>').appendTo('#more_images_div').styler().fadeIn('slow');
      	return false;
      });

      Ну тут все понятно. При клике на кнопку в ДИВ добавляется инпут для загрузки файла. Но не смотря на return false страница тут же обновляется, естественно уже без новодобавленного инпута. Убирал эту часть .styler() все работает, но инпуты естественно не стилизуются, что меня не устраивает. Да и вообще вот эта строка запускающая стайлер

      $('input, select').styler();

      В консоли дает ошибки, и все что ниже нее уже не выполняется. Подскажите, что же делать? jQuery v2.1.1 нужен как воздух, т.к. только на нем нормально работает не менее нужный мне планин FullCalendar. Заранее спасибо.

      • Подключил на странице примеров jQuery 2.1.1 — никогда проблем не выявлено, все работает.

        Проверил ваш пример — у вас ошибка в скрипте. Если удалить .fadeIn('slow'), то она исчезает. Вы неправильно в данном случае используете fadeIn. Вы его подключаете к input, а нужно так:

        
        $('#add_image').click(function () {
          $('<input type="file" name="my_image[]" class="styler" /><br>').appendTo('#more_images_div').styler();
          $('#more_images_div').fadeIn('slow');
          return false;
        });
        
  2. Наверное было бы полезно иметь возможность отключать placeholder у селекта если он не нужен. В некоторых формах пустое значение первого option имеет важное значение, в таком случае придется дублировать его значение в placeholder что не очень удобно.

    Спасибо.

  3. Здравствуйте, очень нравится Ваш плагин, но иногда появляются проблемы которые самостоятельно решить никак не могу :(
    подскажите пожалуйста как быть с этим рабочим скриптом, но когда включаю стилизацию, то он перестает работать :(

    
    jQuery(".domainreginput").hide();
    jQuery(".domainoptions input:first").attr('checked','checked');
    jQuery("#domain"+jQuery(".domainoptions input:first").val()).show();
    jQuery(document).ready(function(){
        jQuery(".domainoptions input").click(function(){
            jQuery("#domainresults").slideUp();
            jQuery(".domainreginput").hide();
            jQuery("#domain"+jQuery(this).val()).show();
        });
    });
    function checkdomain() {
        var domainoption = jQuery(".domainoptions input:checked").val();
        var sld = jQuery("#"+domainoption+"sld").val();
        var tld = '';
        if (domainoption=='incart') var sld = jQuery("#"+domainoption+"sld option:selected").text();
        if (domainoption=='subdomain') var tld = jQuery("#"+domainoption+"tld option:selected").text();
        else var tld = jQuery("#"+domainoption+"tld").val();
        jQuery("#loading3").slideDown();
        jQuery.post("cart.php", { a: "domainoptions", sld: sld, tld: tld, checktype: domainoption, ajax: 1 },
        function(data){
            jQuery("#domainresults").html(data);
            jQuery("#domainresults").slideDown();
            jQuery("#loading3").slideUp();
        });
    }
        $('input:radio').styler({  
          wrapper: 'div.domainoptions'  
        }) 
    

    Вот верстка:

    
    <!-- меню выбора, по клику появляется соответсующий блок и скрываются другие-->
    <div><input type="radio" name="domainoption" value="incart" />Use..</div>
    <div><input type="radio" name="domainoption" value="register" />Register..</div>
    <div><input type="radio" name="domainoption" value="transfer" />Transfer..</div>
    <div><input type="radio" name="domainoption" value="owndomain" />I will use my existing..</div>
    <div><input type="radio" name="domainoption" value="subdomain" />Use a sub..</div>
    
    <!--скрытые блоки, появляются по выбору соответствующей радиокнопке -->
    <div class="domainreginput" id="domainincart">...</div>
    <div class="domainreginput" id="domainregister">...</div>
    <div class="domainreginput" id="domaintransfer">...</div>
    <div class="domainreginput" id="domainowndomain">...</div>
    <div class="domainreginput" id="domainsubdomain">...</div>
    
  4. Здравствуйте! Не приходит атачмент в параметрах при использовании плагина. Хотя на второй форме все нормально. Не скажите куда копать?

  5. Здравствуйте
    а можно ли к селекту подключить плагин jscrollpane, для оформления полосы прокрутки в списке

  6. Подскажите пожалуйста, а как в нем изменить высоту select? (height)
    Нужно чтобы поля были пошире, и что то я запутался в этом css… :(

  7. И как применить это не ко всем формам, если их несколько на странице?

    • Пример:

      <select class="myselect"></select>
      
      .myselect .jq-selectbox__select {
      	height: 50px;
      }
      
      • Я это уже пробовал, select увеличивается, а вот option нет :(

        А про это

        И как применить это не ко всем формам, если их несколько на странице?

        Я имел в виду вот что
        При инициализации таким способом

        <blockquote><script>
        		(function($) {
        		$(function() {
        			$('input, select, button').styler({
        				selectSearch: true
        			});
        		});
        		})(jQuery);
        </blockquote>

        стилизуются все имеющиеся на странице формы, а как обратится непосредственно к нужному полю или селекту?

        • Я это уже пробовал, select увеличивается, а вот option нет :(

          В статье указаны все селекторы для стилизации.

          а как обратится непосредственно к нужному полю или селекту?

          $('select.myselect').styler();
  8. Подскажите как избавится от надписи «Выберите…» в селектах. Облазил весь код но так и не нашёл где. Пробовал менять 31 строку в файле jquery.formstyler.js

    selectPlaceholder: 'Выберите...',
    

    — не помогло. Хелп плиз.

  9. Как повесить событие на jq-selectbox___not-found?

  10. Здравствуйте. В моей форме один select меняет свое значение в зависимости от второго. Модель такая:

    <form>
    <select name="street" onChange="MkHouseValues(this.selectedIndex)">
    <option value="не выбрана">Не выбрана</option>
    <option value="">Вариант 1</option>
    <option value="">Вариант 2</option>
    <option value="">Вариант 3</option>
    </select>
    <select name="house">
    <option value="не выбрана">Не выбрана</option>
    </select> 
    </form>

    Без плагина работает все четко. Подключила плагин — форма стала красивой, а вот селекты шевелятся, но путают значения. Наверняка я что-то неправильно прописала здесь:
    $(function() {
    $(‘select’).styler();
    $(‘select’).change(function(e) { $(‘select’).trigger(‘refresh’); });
    });

    Помогите, пожалуйста, правильно подключить плагин.

  11. Скажите, а как задать для select ширину? Пробовала прописывать в .jq-selectbox__select , и в самой форме — что-то ничего не получается.

  12. Разработчик — ты реальный красавчик.
    Открыл для себя твой плагин и он безупречен.
    Спасибо тебе огромное
    +100500 тебе в карму))

  13. Здравствуйте.
    Возможно — это Вам пригодится.
    Нужно добавить в jquery.formstyler.css после 245 строки

    .jq-selectbox li:first-of-type:hover,
    .jq-selectbox li.selected:first-of-type {border-radius: 3px 3px 0 0;}
    .jq-selectbox li:last-of-type:hover,
    .jq-selectbox li.selected:last-of-type { border-radius: 0 0 3px 3px;}

  14. Здравствуйте.
    Вот здесь я тестирую плагин http://autoinfa.com/kasko/FormStyler/example2.php
    Первые два селекта связаны между собой функцией. Для селектов я задала стиль:

    .jq-selectbox.focused .jq-selectbox__select {
       outline:3px solid #FFCC33;
    }

    Проблема № 1. В FireFox и Opera — в первом селекте не закрепляется outline. В IE закрепляется и в первом, и во втором селекте одновременно — получается 2 выделенных поля.

    Проблема № 2. В IE , в option появляются неожиданные сокращения. Попробуйте выбрать «Англия», город «Манчестер» — это только в IE.
    Как это можно исправить?

  15. как сделать чекбокс select all?

  16. Здравствуйте.
    Дмитрий, спасибо за плагин и поддержку над ним.
    Есть небольшая просьба в помощи, как его применить к также с популярным плагином «jQuery.validationEngine» ( http://posabsolute.github.io/jQuery-Validation-Engine ).
    Не могли бы вы предоставить пример так как вы написали это для плагина «jQuery Validation»?
    Заранее благодарен, за любую помощь?

    • Дмитрий чтоб вам не тратить свое время на помощь по данному вопросу, вопрос уже не актуален (уже нашел решение).
      Еще раз спасибо за плагин, и успехов в ваших работах.

  17. Добрый день.
    При установке data-placeholder, открывающийся список промотан в самый конец.
    как Установить так, что бы список был самого начала при раскрытии?

  18. Как ограничить добавление полей для выбора файлов, например до 3

  19. .jq-selectbox__trigger-arrow

    как ему прописать стили, при наведении на select ?

    Спасибо

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

    
    if ($(".code input[type=checkbox]").is(":checked") == true) {
                    code = 4;
                } else {
                    code = 0;
                }
    

    не работает

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