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 при переключении селекта с клавиатуры появляется нативный выпадающий список.

Скачать

Плагин на 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-атрибут.

Колбеки (callbacks)

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

$('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-селекторы, используемые для оформления

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

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

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

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

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

• Использование плагина jQuery Form Styler с плагином jQuery Validation
• Стилизация скролла в выпадающем списке селекта с помощью плагина jScrollPane
• Обновление селекта после ajax-запроса
• Селект во всплывающем окне
• Делаем в селекте пункт неактивным при выборе
• Помечаем все чекбоксы
• Добавляем класс “checked” к тегу label при клике по чекбоксу
• Делаем кнопку неактивной при клике по чекбоксу