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

  16. 58
    Роман

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

  17. 62
    Сергей

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

  18. 65
    Sasser

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

  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');
    	}
    });
    
Ваш комментарий