Главная JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Плагин jQuery Form Styler

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы:

  • флажок <input type="checkbox">;
  • переключатель <input type="radio">;
  • поле для выбора файла <input type="file">.
  • поле для ввода чисел <input type="number">.
  • раскрывающийся список <select>;

Демонстрация работы плагина

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

Достоинства

  • Общее:

    • Простота оформления с помощью CSS.
    • При отключенном JavaScript отображаются стандартные элементы форм, т. е. их работоспособность не теряется.
    • Псевдоэлементы выводятся внутристрочно, т. е. повторяют свойство стандартных элементов.
    • Поддержка работы с динамически добавляемыми/изменяемыми элементами.
    • Поддержка атрибутов checked, selected, disabled.
    • Атрибуты class, id, data-*, title, указанные у оригинальных элементов форм, передаются в соответствующие псевдоэлементы (id передается с суффиксом, чтобы избежать дублирования).
    • Поддержка динамического добавления/изменения атрибутов class, id, data-*, title.
    • Поддержка сброса формы при нажатии на <input type="reset">.
    • Умеет «ловить» нажатие клавиши Tab и позволяет переключать элементы с клавиатуры.
    • Кроссбраузерность (все современные браузеры, а также IE8 и выше).
    • Поддержка валидации HTML5.
    • Поддержка мультиязычности.
  • Для селектов:

    • Поддерживает атрибут multiple, т. е. позволяет выбирать несколько пунктов (мультиселект).
    • Поддерживает группировку элементов списка в селекте (тег <optgroup>).
    • Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height, либо через опцию selectVisibleOptions).
    • Поддерживает «умное позиционирование», т. е. не уходит за видимую часть страницы при открытии списка.
    • Поддержка поиска по пунктам одиночного селекта.
    • Поддержка замещающего текста (placeholder).
    • Автоматически подстраивает ширину, если она не указана.
    • Поддерживает прокрутку колесом мыши.

Недостатки

  • При использовании некоторых нестандартных шрифтов (например, Open Sans, подключенный с Google Fonts), неправильно определяется ширина псевдоселекта, в связи с чем текст пунктов обрезается. Это связано с тем, что шрифт применяется лишь после стилизации селекта плагином. Как вариант решения этой проблемы, можно сделать отложенный запуск скрипта:

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

    Еще один вариант решения — использовать специальный скрипт, который переинициализирует плагин после окончания загрузки шрифта.

  • В Mac OS при переключении селекта с клавиатуры появляется нативный выпадающий список.

Скачать

Плагин «jQuery Form Styler»

Версия: 2.0.1 | Последнее обновление: 29.08.2017

Плагин на GitHub | Плагин в CDN jsDelivr

Подключение плагина

Для работы плагина необходимо использовать jQuery не ниже версии 1.7.0.

  1. Подключите jQuery (если он еще не подключен), плагин и стили к нему, добавив следующие строки перед тегом </head>:

    <link href="путь_к_файлу/jquery.formstyler.css" rel="stylesheet" />
    <link href="путь_к_файлу/jquery.formstyler.theme.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="путь_к_файлу/jquery.formstyler.min.js"></script>
    

    Файл jquery.formstyler.css — это обязательные стили, необходимые для корректной работы плагина, а jquery.formstyler.theme.css — визуальное оформление элементов форм.

  2. Для активации плагина примените метод .styler к тегам, которые хотите стилизовать:

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

Отключение плагина (метод destroy)

Если есть необходимость отвязать плагин от стилизованного элемента, то задействуйте метод destroy:

$('select').styler('destroy');

Динамическое изменение

При динамическом изменении элементов формы необходимо запустить триггер refresh, например:

$('button').click(function(e) {
	e.preventDefault();
	/* делаем чекбокс неактивным */
	$('input:checkbox').attr('disabled', true)
		/* обновляем состояние псевдочекбокса */
		.trigger('refresh');
});

При использовании сторонних плагинов, например, jQuery Validation, которые меняют атрибуты элементов формы, событие .trigger ('refresh') необходимо запускать, используя setTimeout, иначе состояния псевдоэлементов не изменится. Пример с вышеуказанным плагином:

$('form').validate({
	invalidHandler: function() {

		setTimeout(function() {
			$('input, select').trigger('refresh');
		}, 1)

	}
});

Опции плагина

Большинство опции плагина можно переопределить для конкретного тега, указав ему соответствующий data-атрибут.

ОпцияПо умолчаниюОписаниеdata-атрибут
idSuffix-stylerсуффикс к атрибуту id, передаваемому от стилизуемого элемента
filePlaceholderФайл не выбрантекст по умолчанию в поле выбора файла (когда файл не выбран)data-placeholder
fileBrowseОбзор…текст кнопки у поля для выбора файлаdata-browse
fileNumberВыбрано файлов: %sтекст после выбора нескольких файлов, вместо %s вставится числоdata-number
selectPlaceholderВыберите…замещающий текст (плейсхолдер) в одиночном селекте; отображается, если по умолчанию выбран первый пункт с отсутствующим текстом: <option></option>data-placeholder
selectSearchfalseпоказывать поисковое поле в одиночном селекте (true — да, false — нет)data-search
selectSearchLimit10минимальное количество пунктов одиночного селекта, при котором показывать поискdata-search-limit
selectSearchNotFoundСовпадений не найденотекст сообщения о том, что нет пунктов, удовлетворяющих поискуdata-search-not-found
selectSearchPlaceholderПоиск…текст по умолчанию в поисковом полеdata-search-placeholder
selectVisibleOptions0количество отображаемых пунктов списка в простом селекте без прокруткиdata-visible-options
selectSmartPositioningtrueумное позиционирование для выпадающего списка селекта:
true — работает вверх и вниз
false — работает только вниз
'-1' — позиционирование отключено
data-smart-positioning
localeruтекущая локаль
localesанглийская локализациямассив локалей с переводом соответствующих опций, подробнее смотрите здесь

Колбеки (callbacks)

НазваниеПо умолчаниюОписание
onSelectOpenedfunction () {}запускается при раскрытии списка селекта, целевой селект можно захватить через $(this)
onSelectClosedfunction () {}запускается при закрытии списка селекта, целевой селект можно захватить через $(this)
onFormStyledfunction () {}запускается после выполнения плагина

Пример использования:

$('input, select').styler({
	fileBrowse: 'Выбрать',
	singleSelectzIndex: '999',
	onSelectOpened: function() {
		// к открытому селекту добавляется красная обводка
		$(this).css('outline', '3px solid red');
	}
});

Локализация

Плагин поддерживает многоязычность. Для этого используются опции locale и locales.

Пример локализации (английская по умолчанию включена в плагин):

$('input, select').styler({
	locale: 'en',
	locales: {
		'en': {
			filePlaceholder: 'No file selected',
			fileBrowse: 'Browse...',
			fileNumber: 'Selected files: %s',
			selectPlaceholder: 'Select...',
			selectSearchNotFound: 'No matches found',
			selectSearchPlaceholder: 'Search...'
		}
	},
});

CSS-селекторы, используемые для оформления

Чекбокс
.jq-checkboxчекбокс по умолчанию
.jq-checkbox__divдополнительный вложенный тег
.jq-checkbox.checkedвыбранный чекбокс
.jq-checkbox.disabledнеактивный (недоступный для выбора) чекбокс
.jq-checkbox.focusedфокус на чекбоксе, когда нажата клавиша Tab
.jq-checkbox spanдополнительный вложенный тег
Радиокнопка
.jq-radioрадиокнопка по умолчанию
.jq-radio__divдополнительный вложенный тег
.jq-radio.checkedвыбранная радиокнопка
.jq-radio.disabledнеактивная (недоступная для выбора) радиокнопка
.jq-radio.focusedфокус на радиокнопке, когда нажата клавиша Tab
.jq-radio spanдополнительный вложенный тег
Поле для выбора файла
.jq-fileродительский контейнер
.jq-file.focusedфокус на поле
.jq-file.changedфайл выбран
.jq-file.disabledнеактивное поле
.jq-file__nameполе с именем файла
.jq-file__browseкнопка выбора файла
Поле для ввода чисел
.jq-numberродительский контейнер
.jq-number.focusedфокус на поле
.jq-number.disabledнеактивное поле
.jq-number__fieldобертка для поля ввода
.jq-number__spin.minusкнопка «минус»
.jq-number__spin.plusкнопка «плюс»
Селект (простой)
.jq-selectboxродительский контейнер
.jq-selectbox.openedвыпадающий список селекта раскрыт
.jq-selectbox.dropupвыпадающий список селекта раскрыт вверх
.jq-selectbox.dropdownвыпадающий список селекта раскрыт вниз
.jq-selectbox.changedвыбрано значение, отличное от заданного по умолчанию
.jq-selectbox__selectселект в свернутом состоянии
.focused .jq-selectbox__selectфокус на селекте, когда нажата клавиша Tab
.disabled .jq-selectbox__selectнеактивный (недоступный для выбора) селект
.jq-selectbox__select-textдополнительный вложенный тег для свернутого селекта
.jq-selectbox .placeholderзамещающий текст
.jq-selectbox__triggerправая часть свернутого селекта (условный переключатель)
.jq-selectbox__trigger-arrowвложенный тег для переключателя (стрелка)
.jq-selectbox__dropdownобертка для выпадающего списка
.jq-selectbox__searchобертка для поискового поля
.jq-selectbox__search inputпоисковое поле
.jq-selectbox__not-foundсообщение об отсутствии результатов поиска
.jq-selectbox ulвыпадающий список
.jq-selectbox liпункт (опция) селекта
.jq-selectbox li. selectedвыбранный пункт селекта
.jq-selectbox li. disabledнеактивный (недоступный для выбора) пункт селекта
.jq-selectbox li. optgroupзаголовок для группы пунктов
.jq-selectbox li. optionпункт списка в группе
Селект (множественный)
.jq-select-multipleродительский контейнер
.jq-select-multiple.disabledнеактивный (недоступный для выбора) селект
.jq-select-multiple liпункт (опция) селекта
.jq-select-multiple li. selectedвыбранный пункт селекта
.jq-select-multiple li. disabledнеактивный (недоступный для выбора) пункт селекта
.jq-select-multiple li. optgroupзаголовок для группы пунктов
.jq-select-multiple li. optionпункт списка в группе
Прочие элементы (только CSS)
.stylerкласс, используемый для стилизации текстовых полей и кнопок (работает независимо от плагина)

История изменений

Находится здесь.

Стилизация без плагина

Если вам необходимо стилизовать только радиокнопки или чекбоксы, то это можно сделать без данного плагина, используя лишь CSS. В таком случае рекомендую использовать решение из этой статьи.

Примеры различных решений

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

  1. Как динамически получить значение input tyep=number?

  2. Здрасте. Вопрос на засыпку.)) — Как включить английский? Я имею введу для —

    <input type="file"/>

    А то в описании там… ссылочка не работает.!? Смотрел коменты, но про это вопросов не нашёл.

  3. Если нужно стилизовать только один input number то дня него есть отдельный плагин https://number-plugin.ru

  4. Привет! Подскажите, почему скрипт не передаёт неактивные элементы в select?
    То есть у стандартного select есть option с атрибутом disabled, но после стилизации данный option доступен к выбору. Как подправить это дело?

  5. Приветствую. Отличный плагин.
    Один вопрос — как передать в инпут селект дополнительный блок\спан? Мне нужно по клику на селект показывать список цветов такого формата

    <option value="value1"><span class="colorval">colorval</span>Item1</option>

    Где в спане будет квадратик цвета.
    Сейчас на фронте это обрезается

    <div class="jq-selectbox__select-text">colorvalItem1</div>
  6. Константин
    4 года назад

    Делаю один проект, решил воспользоваться вашим скриптом. Не могу разобраться как открыть селект при клике на label для данного селекта. Можете подсказать? Задача достаточно популярная, но нигде не смог найти ответа.

    Заранее благодарен!

  7. Всем привет!

    У кого не работают селекты (у меня не раскрывались) на Android при использовании в fancybox, попробуйте отключить у fancybox при инициализации touch. Мне помогло.

    $('selector').fancybox({
    	touch: false
    });
  8. Подскажите пожалуйста. Как сделать зависимые списки на этом плагине?

  9. Как в «select» выбрать определенный «option», который зависит от get запроса?
    Например есть сортировка select→ по умолчанию, по убыванию, по возрастанию.
    Всегда стоит «по умолчанию», если выбрать «по убыванию» происходит перезагрузка станицы и должно брать из get параметр, что нужно указать «selected» «по убыванию», а не возвращать по умолчанию.
    Вот такое туповатое объяснение получилось.

  10. Как подключать ваш плагин в проект на gulp и sass

  11. Здравствуйте!
    В select не работает поиск, если вводить в формате, например телефон: +7 (812) и т. д.
    В консоли ошибка Uncaught SyntaxError: Invalid regular expression: /.*?+7 (812).*?/: Nothing to repeat

  12. Отличный плагин, но почему-то у меня не работает в iOS, точнее не открывается выпадающий список.
    Как поправить?
    https://codepen.io/eandycat/pen/gOxoapG

  13. Убрать строку if (iOS) return;
    В ios, скорее всего, уже давно всё ок!))

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