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» Подключение плагина ...

Полезные комментарии (10)
Комментарии (2 601)
  1. 1
    Захарий

    Спасибо большое! Прекрасный скрипт

  2. 2
    Wishmaster

    Dimox, супер! + за подробное описание, даже css-селеторы указаны что для чего. Огромное спасибо и удачи!

  3. 3
    Сергей

    Подскажите, а текстовые инпуты не стилизирует?

  4. 5
    Alex

    Здравствуйте
    Не добавляется класс при фокусе. Проверил на Вашей демонстрационной странице. Там аналогично не добавляется класс.

  5. 9
    Alex

    Еще дополнение .
    Плагин не берет класс с селекта. Например я хочу два разных селекта. Дописал класс селекту и плагин уже дописал этот класс span.selectbox.

  6. 13
    Hellokenpark

    У меня на странице несколько селекторов, после подключения данного плагина идёт применение только к первому идущему в структуре, остальные игнорятся.
    Следует активировать плагин для каждого имеющегося селектора на странице или есть более лаконичное решение?

  7. 15
    Юрий В.

    Спасибо за очень хороший плагин! Но у меня возникло пожелание, или даже скорее просьба добавить скролл в селект с возможность изменения его дизайна. Заранее благодарен.

  8. 16
    Дмитрий

    Здравствуйте! Плагин понравился очень, но есть одно неудобство у селекта, может это как-то настраивается:
    Допустим, прогружается select, у один из последних пунктов (при их большом количестве) выбран по умолчанию. Когда раскрываем список, то чтобы понять какой пункт выбран, приходится листать вручную, а у стандартного позиционирование сразу стоит как надо.
    Как можно это настроить?

  9. 18
    Дмитрий

    Может суммировать высоту блоков (пунктов списка) пока не встретится выбранный элемент, а потом прокрутить список примерно на это расстояние?
    Самому мне в чужом коде не разобраться, слишком долго проплюхаюсь(

  10. 21
    Дмитрий

    Было бы супер, если получится=) Плагин этот много где нужен, но вот эту часть бы только допилить..
    А ещё вопрос такой: а есть в этом плагине selectbox с автофильтром (автоматически фильтрует список по введенным буквам)?

  11. 23
    Женя

    Здравствуйте!
    Плагин просто отличный, но столкнулся с такой проблемой: когда выбран один из вариантов селекта, то не получается сбросить атрибут selected и назначить его первому элементу например через событие onclick какой то ссылки например.

    Т.е.

    <a href="#" onclick="resetselect(); return false;">Сбросить select</a>
    function resetselect() {
     $('#myselect option:first').attr('selected','selected');
    };
    

    Подскажите пожалуйста как решить данную проблему? Заранее спасибо!

  12. 28
    Julianka

    Не могу не заметить что стиль «позаимствован» с Twitter Bootstrap. Или это он и есть?) Нехорошо тогда, нужно разрешение спрашивать)

  13. 31
    Андрей

    Возникла проблема с input file в IE 8-9 (скорее всего проблема есть и в более ранних версиях). При загрузке файла через обновленный input, файл на сервер не пересылается. В других браузерах такой проблемы нет.

    Почитал комментарии, но не нашел решения. Конечно, может что-то упустил :)

  14. 34
    алексей

    Нашёл проблему с firefox, наблюдаю только там версия FF 17.0.1
    Версия плагина Версия: 1.2.1
    Проблема возникает при добавлении атрибута selected к первому элементу option потом когда я выбираю другие пункты из списка мне всё равно передаётся value первого пункта, хотя визуально выбирается другой пункт.
    Если атрибут selected назначить не первому элементу option проблемы не будет наблюдаться.
    Проблема уходит если выбрать Пункт 2 , а потом Пункт1 , всё после этого всё работает, как надо

    Ссылка для теста
    http://playnonstop.net/files/select/dimox-select-problem.html

    Код для теста

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Примеры к статье</title>
    	<link href="jquery.formstyler.css" rel="stylesheet" />
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    	<script src="jquery.formstyler.min.js"></script>
    	<script>
    	(function($) {
    	$(function() {
    	$('select').styler();
    	})
    	})(jQuery)
    	</script>
    	<style>
    	* {
    	margin: 0;
    	padding: 0;
    	}
    	</style>
    </head>
    
    <body>
    
    <p>
     <select id="cat_name_id" onchange="selectFunction(this)" name ="cat_name">
     <option selected value="1">Item 1</option>
     <option value="2">Item 2</option>
     <option value="3">Item 3</option> 
    </select>
    </p>
    
    <script>
     function selectFunction(myOption) {
     alert("value = " + myOption.value);
     }	
    </script>
    
    </body>
    </html>
    
    • 35

      Ранее уже сообщали об этой проблеме. Я вносил правки, казалось, что проблема решена (по крайней мере по тестируемому в тот момент примеру она решилась), а оказывается нет. Нелогичное поведение Firefox. Единственное решение, которое я пока вижу — не ставить первому пункту атрибут selected.

      В тонкостях JavaScript, к сожалению, не разбираюсь, поэтому не представляю, как это можно решить.

    • 36

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

  15. 37
    Руслан

    Не работает плагин при использовании с плагином fancybox.
    Делаю форму заказа.
    popup — делаю через fancybox, внутри же элементы, среди которых

    <select class="sel_dimox">
    							<option value="1">Пакет Базовый</option>
    							<option value="2">Пакет Оптимальный</option>
    							<option value="3">Пакет Элит</option>
    						</select>

    То есть, если использовать отдельно на странице все работает, если внутри fancybox то печалька((

  16. 46

    Выложил новую версию плагина — 1.2.2

  17. 47
    Валентин

    Как ограничить количество пунктов выпадающего списка SELECT? А лучше всего выписать все возможные настройки для данного плагина выше вместе с описанием

  18. 51
    Евгений

    Немного надо доработать, чтоб цеплял позицию width у самого select.
    Чтоб длина самого бокса, совпадала с длиной выпадающего списка.

    Не удобно прописывать.

    .CLASS .selectbox .select{
     width: YYpx;
    }
    

    Тем более, если учесть момент, что в данном случае, width самого бокса изменится, а длину выпадающего надо дописывать.
    С одной стороны легче дописать ф-ю и не перегружать CSS.

  19. 53

    Добрый день. Делаю сайт с каталогом спортивных событий — вот ссылка. Пытаюсь подключить ваш код, но применяется он только для первого селекта из трех, комменты все прочитал, видел две подобных проблемыЮ не знаю помогли ли им ваши ответы, но мне не помогли.

    Вызываю как вы и говорили код

    (function($) {
    		$(function() {
    
    			$('select').styler();
    
    		})
    		})(jQuery)

    Но как вы видите по ссылке выше, он срабатывает только для первого селекта. Можете подсказать ?

  20. 57
    Pacahon

    Спасибо за плагин. У меня есть просьба к элементу с классом .selectbox прикрутить присвоение какого-нибудь класса .selected, когда .dropdown в значении display:block В стилизации селекта бы очень помогло.

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