Как задать свои стили для элементов формы, checkbox, radio, file, section, с помощью jQuery Form Styler
Віталий
Доброго времени суток. 🙂
Сегодня хочу рассказать о способе как изменить внешний вид для разных элементов формы, таких как checkbox, radio, file, section. Изменение стилей элементов, будет меняться благодаря скриптам - jQuery Form Styler, которые созданы для выполнения этой задачи. Подключив и установив, данный скрипт себе на сайт, все эти элементы на сайте изменят внешний вид, что намного интересней чем стандартный их вид. Скрипт идет с стандартной библиотекой стилей CSS, которую при желании и наличии навыков работы с CSS кодом, можно будет поменять и задать элементам формы любой вид, который захотите.
Ранее на сайте я уже писал статьи об изменениях внешнего вида checkbox, radio, file, но только с помощью обычного CSS. Кому-то, возможно, будет нужнее тот материал. Ознакомится с ними можно по ссылках ниже:
То что будем делать с вами сегодня, можно посмотреть или скачать по ссылкам ниже:
Если вам понравился такой вариант, то нужно выполнить несколько шагов, подключения jQuery Form Styler.
jQuery скрипт
Для работы jQuery Form Styler, нужно подключить библиотеку jQuery. Как это сделать прочитайте в статье - Как и где подключить скрипт?. Подключать нужно такую строку:
Если вы используете WordPress, то делать этого не нужно. У WordPress библиотека подключена по умолчанию, разве что вы специально ее отключали.
После библиотеки нужно уже подключать сам скрипт jQuery Form Styler. Скрипт можно взять из архива что можно скачать по ссылке в начале статьи. В таком случаи он будет запускаться с вашего сайта. Подключается примерно так:
<script src="jquery.formstyler.min.js"></script>
Нужно только указать правильный путь к файлу jquery.formstyler.min.js. Если у вас все файлы в корне то так и оставить, а если в папках то весь путь вложенности. Используйте статью с инструкцией подключения.
После подключения скрипта jQuery Form Styler, чтобы он начал работать его нужно запустить. Запуск скрипта нужно сделать после библиотеки jQuery и самого скрипта. Выглядит он так:
Можно подключить как есть или в отдельном файле или внутри уже какого-то существующего файла. Используйте статью с инструкцией подключения.
HTML разметка
Определенных правил для полей нет, скрипт сам их найдет в коде и переделает по своему, главное не допускайте ошибок в коде и все будет работать.
CSS стили
Чтобы окончательно завершить подключение jQuery Form Styler, нужно подключить его CSS стили. Они размещаются в двух файлах. Взять их можно из скачанного архива. Подключить их можно в шапке сайта так:
Если у вас какая-то система управления сайтом типа WordPress, то можете подключать согласно ее правилам.
Чтобы поменять внешний вид элементов, которые показаны в примере, можете вносить изменения в файле jquery.formstyler.theme.css. Так что если стандартная тема jQuery Form Styler, вам не по душе, вы легко можете поменять ее под свой сайт и свои вкусы.
