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

Полезные комментарии (10)
Комментарии (2 403)
  1. 4

    А опция для задания текста по умолчанию для select?

  2. 8
    @

    Отлично Дима!
    Очень рад, что ты нашёл время объединить плагины в один. Я даже уже знаю, где это всё применить, как раз проект на подходе к вёрстке классный. Потом покажу обязательно, но это не скоро будет, возможно в следующем году уже.

    Стоит заметить, что при оформлении элементов форм я не использовал ни одного изображения.

    Лукавишь )))) или base64 не считается картинкой ? ))

  3. 12
    @

    А как же дерево флажков,в котором потомки зависят от родителей? Ведь удобно же для той же админки.

    Это нестандартное для веба поведение, которое осуществляется только а js, дуvаю не составит труда дописать и плагин и реализовать это самостоятельно.

    Зачем в html добавлять лишний option? А потом еще и проверять на стороне сервера?

    в 90% случаев первый пустой option присутствует изначально, при генерации выпадающего списка движком. Ну и как бы это является предсказуемым и логичным поведением. Потому что если человек что-то выбрал, а потом хочет отменить выбор — у него должна быть такая возможность.

  4. 13
    Григорий
    @

    А есть ли возможность к определенным select использовать отдельно оформление?

  5. 18
    Dmitry Mukhach

    А обычные input для ввода текста в этом же стиле как сделать?

  6. 22

    Интересно, а зачем такая конструкция:

    <span class="selectbox" style="display: inline-block; position: relative">
     <div class="select" style="float: left; position: relative; z-index: 10000">
     <div class="text">-- Выберите --</div>
     <b class="trigger"><i class="arrow"></i></b>
     </div>
     <div class="dropdown" style="position: absolute; z-index: 9999; overflow-y: auto; overflow-x: hidden; list-style: none; left: 0; display: none">
     <ul>
     <li>-- Выберите --</li>
     <li>Пункт 1</li>
     <li>Пункт 2</li>
     <li>Пункт 3</li>
     </ul>
     </div>
    </span>
    

    не правильнее ли было бы так:

    это валидно по крайней мере и с

    display: inline-block;

    имеет больше прав на существование

  7. 26
    Виталий

    Подскажи пожалуйста как задать ширину селекта в пикселях? Если их несколько на странице и каждому нужна разная ширина

  8. 28
    sera

    Возникла проблема с функцией click по чекбоксу, укажите куда копать.
    стандартно click не реагирует на стилизированные чекбоксы, приходться изощрятся click на span.checkbox, но тогда почему-то не срабатывает .live …

  9. 31
    Сергей

    Не могу словить клик по радио кнопке, в стандартном работает, а с плагином нет:
    как я это делаю:

    $(‘input[name=»text»]’).click(function() {
    var radio = $(‘input[name=»text»]:checked’).val();
    console.log(radio);
    });

    Спасайте :) оч. нуна

  10. 33
    Сергей

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

  11. 36
    @

    Для селектов не хватает перемнной, задающей z-index, а то получается селекты показываются поверх попап окошек, отправил правки на git https://github.com/Dimox/formStyler/pull/1

  12. 50
    Сергей

    А у меня что то вообще со стилями все поехало, не могу понять что такое? теперь и стиль и радио кнопки отдельно друг от друга

  13. 52
    Роман

    Дмитрий, здравствуйте. В Вашем дэмо примере не работает переход стрелками вверх на радио кнопках в браузере Chrome.

  14. 53
    Роман

    А именно с радио кнопки обернутую в label вместе с текстом, на кнопку привязанную к label.

  15. 56
    Игорь

    Очень понравился плагин, но столкнулся с некоторыми проблемами…
    Как изменить размер отдельного select
    Как включить отображение select multiple, что бы он не использовался formstyler

    • 57

      Все элементарно.

      Как изменить размер отдельного select

      Смотрите здесь.

      Как включить отображение select multiple, что бы он не использовался formstyler

      Добавьте к стилизуемым селектам отдельный класс, и укажите их в код из 3-го пункта.

  16. 58
    Роман

    Дмитрий, здравствуйте. Ещё всплыла одна проблема с radio. Если на странице есть несколько форм с radio кнопками, то если выбрать в одной из форм radio кнопку то с остальных снимаются кнопки.

  17. 62
    Сергей

    Можно ли данный плагин исползовать если на странице имеется несколько селектов с разной заданной шириной?
    Если да, то как реализовать даный момент?

  18. 65
    Sasser
    @

    Подскажите. Мне необходимо сделать связанные select’ы (что бы при выборе в одном, изменялись значения в другом). В java не силен. Нашел готовый скрипт, который изменяет эти значения в select’ах — (немного доработал для себя) работает, но при использовании Вашего скрипта маркированный список остается старым. (то есть значения в Select’ах меняются значения, а в ul li нет).
    Это как то можно реализовать ?

    • 66

      Пример.

      В данном примере я сделал так, что, если в первом селекте выбрать «Пункт 3», то во втором выбирается «Пункт 5».

      • 67
        Sasser
        @

        Не совсем это имел ввиду. Как изменять наполнение второго select при изменении первого?
        Например:
        Первый: «Автомобили, Посуда, Другое».
        Выбираем «Автомобили» — во втором список выпадающий состоит из: «Ford, Audi, BMW».
        А если выбрать в первом «Посуда», то список во втором изменится на: «Вилки, Ложки, Тарелки».

        • 68

          Как вариант сделать 3 селекта (исходя из вашего примера). 2-й и 3-й по умолчанию скрыть. И при изменении 1-го селекта показывать соответственно 2-й или 3-й.

          • 69
            Sasser
            @

            В своем комментарии я написал что это просто пример.
            Да при условии что Select’ов 2-3 и в первом всего 3 значения, вариант более чем хороший, но что делать если select’ов 5. При этом в первом 12 значений и в зависимости от выбора в нем изменяются списки в остальных 4-ех. Тогда таких скрытых селектов потребуется сделать целую кучу. А если учесть, что исходя из выбранных значений в селектах должны производится рассчеты, получается совсем сложно.

  19. 75
    Сергей

    Планируете ли Вы сделать стили под прокрутку ?

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    @
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий