Полное руководство по стилям форм

2022-01-14 0 ∞

В сегодняшней статье мы расскажем вам, как стандартизировать процесс создания форм. А также предоставим несколько простых фрагментов стилей для input CSS, которые помогут вам сделать то же самое.

Бонус: Мы также включили в эту статью руководство по созданию формы подписки на рассылку с элементами анимации с помощью плагина WordPress Gravity Forms.

Начинаем со сброса HTML5
- Общие стили CSS формы
Сокращение

Начинаем со сброса HTML5

Существует несколько вариантов сброса HTML5. Но все дают конечный результат, который нам и нужен. Наиболее подходящий способ сброса вы можете найти здесь.

Чаще всего мы используем Normalize.css. Это идеальное сочетание простоты в использовании и качества.

Общие стили CSS формы

Поля ввода будут работать без стилей CSS. Они будут выглядеть ужасно, но они будут работать.

Поля ввода будут отображаться и работать без стилей.

Но заставить их работать – это лишь полдела. Чтобы задать стили так, чтобы все выглядело красиво, может потребоваться много времени и труда. Хорошая новость заключается в том, что мы сделали большую часть тяжелой работы за вас. Взгляните на приведенные ниже стили для CSS input type text:

/* Формы --------------------------------------------- */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
	border-color: #e0e0e0;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
	border-width: 1px;
	border-style: solid;
	color: #474e57;
	font-size: 16px;
	font-weight: 400;
	padding: 10px;
	width: 100%;
}

input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
textarea:hover, select:hover {
	border-color: #e0e0e0;
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus, select:focus {
	border-color: #adadad;
	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7);
	outline: none;
}

input[type="color"] {
	padding: 5px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #c7c7c7;
	opacity: 1;
	font-weight: 400;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #c7c7c7;
	opacity: 1;
	font-weight: 400;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #c7c7c7;
	opacity: 1;
	font-weight: 400;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #c7c7c7;
	opacity: 1;
	font-weight: 400;
}

input::placeholder,
textarea::placeholder {
	color: #c7c7c7;
	opacity: 1;
	font-weight: 400;
}

Сокращение

Если вы заметили, мы добавили отдельные правила для различных элементов CSS input type. Способ упростить это, который вы могли видеть во многих темах WordPress, заключается в том, чтобы сделать что-то вроде этого:

input,
select,
textarea {
    background-color: #fff;
    border-color: #e0e0e0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    border-width: 1px;
    border-style: solid;
    color: #474e57;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    width: 100%;
}

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

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

Мы управляем CSS, а CSS управляет нами

Стили фокуса ввода и состояния hover делают дизайн более приятным. Сколько раз вы слышали, что все зависит от деталей? Разница от добавления этих стилей (в том числе и для CSS input file) будет невелика, но это значительно улучшит общий опыт взаимодействия.

Углубляемся все дальше: добавляем стили для диапазона, чекбокса, списка и радиокнопки

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

Назначение стилей для диапазона ввода - это совсем не весело. Ползунок - наименее стандартизированный тип элементов ввода. Это потому, что он содержит довольно много движущихся частей, а браузеры любят добавлять для них собственные вендорные префиксы.

В любом случае, это «Полное руководство», и оно не могло бы считаться таковым, если бы мы упустили этот аспект:

input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 28px;
	margin: 10px 0;
	width: 100%;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]:focus::-ms-fill-lower {
	background: #adadad;
}

input[type="range"]:focus::-ms-fill-upper {
	background: #adadad;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #adadad;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: #e0e0e0;
	border: 0 none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
	height: 3px;
	width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: #1c1e1f;
	border: 0 none;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	cursor: pointer;
	height: 28px;
	margin-top: 14px;
	width: 28px;
}

input[type="range"]::-moz-range-track {
	background: #e0e0e0;
	border-radius: 3px;
	cursor: pointer;
	height: 3px;
	width: 100%;
}

input[type="range"]::-moz-range-thumb {
	background: #1c1e1f;
	border: 0 none;
	border-radius: 100%;
	cursor: pointer;
	height: 28px;
	width: 28px;
}

input[type="range"]::-ms-track {
	background: transparent;
	border-color: transparent;
	color: transparent;
	cursor: pointer;
	width: 100%;
	height: 3px;
}

input[type="range"]::-ms-fill-lower {
	background: #e0e0e0;
	border-radius: 3px;
}

input[type="range"]::-ms-fill-upper {
	background: #e0e0e0;
	border-radius: 3px;
}

input[type="range"]::-ms-thumb {
	background: #1c1e1f;
	border: 0 none;
	border-radius: 100%;
	cursor: pointer;
	margin-top: 0;
	height: 28px;
	width: 28px;
}

Если вы заметили, в строках 2-4 приведенного выше кода содержится именно то, что помогает нам подчинить это поле нашей воле. Магическое свойство appearance.

Свойство appearance применяется для отображения элемента с использованием оригинальных стилей операционной системы пользователя.

Задача этого свойства - сделать так, чтобы элемент выглядел и вел себя определенным образом (используя стили браузеров, используемые по умолчанию). Но мы использовали его, чтобы сделать прямо противоположное.

После этого нам нужно сконцентрироваться на указателе (та часть, которую вы перетягиваете) и треке (слайдере), и браузеры будут использовать собственные вендорные префиксы. Мне нравится использовать range.css, но вам нужно протестировать его в разных браузерах и их версиях.

Стили поля со списком

Поле CSS input type со списком на протяжении многих лет оставалось тем камнем, о который разбивался наш дизайн и кроссбраузерная совместимость. Предлагалось много решений, в том числе создавались целые библиотеки Javascript. Но самый простой способ, который нашел я, заключается в добавлении всего нескольких строк CSS:

Поле со списком в разных браузерах

Наша основная тема Альфа имеет следующие варианты стилей поля со списком, но если вы добавите приведенный ниже фрагмент кода CSS в свою таблицу стилей и загрузите исходные файлы для этой статьи, чтобы извлечь изображения, то получите красивые поля со списком, независимо от того, в каком браузере отображается форма:

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(images/select-bg.svg);
	background-repeat: no-repeat;
	background-position: right 10px center;
	-webkit-background-size: 14px 12px;
	background-size: 14px 12px;
}

И это все. Мы снова используем свойство appearance. Различные браузеры по- разному определяют оформление input CSS кнопки переключателя. Чтобы решить данную проблему, можно добавить аккуратное фоновое изображение, которое будет работать в качестве переключателя.

Используйте SVG для изображения. Дополнительным преимуществом этого формата является то, что он, как правило, имеет меньший размер, чем обычный JPG или PNG.

Пользовательские стили CSS для чекбокса и радиокнопки

Здесь важно совместить структуру дерева DOM и эти элементы. Возможно, вам придется изменить правила CSS или структуру DOM, чтобы все работало правильно. Но уделив немного внимания деталям, вы сможете сделать это. И вы не пожалеете о потраченном времени:

input[type="checkbox"],
input[type="radio"] {
	margin: 0;
	opacity: 0;
	padding: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	background: url(images/checkbox.svg) no-repeat scroll left center transparent;
	-webkit-background-size: 15px 15px;
	background-size: 15px 15px;
	display: inline-block;
	line-height: 15px;
	margin-left: -18px;
	padding-left: 22px;
}

input[type="checkbox"]:checked + label {
	background-image: url(images/checked.svg);
	-webkit-background-size: 16px 15px;
	background-size: 16px 15px;
}

input[type="radio"] + label {
	background-image: url(images/radio.svg);
}

input[type="radio"]:checked + label {
	background-image: url(images/radio-select.svg);
}

Мы снова используем SVG-изображения для отображения чекбоксов и радиокнопок, а также их различных состояний. Изменив отступы, поля и непрозрачность в первых строках приведенного выше кода, мы избавляемся от стилей браузера по умолчанию. В следующих строках мы используем трюк, размещая изображения там, где они нам нужны.

Плагины WordPress для добавления стилей форм

Теперь у нас есть понимание того, что нужно сделать, чтобы задать стили для input CSS. До сих пор мы использовали их только в условиях, при которых у нас есть полный контроль: статический HTML. Если вы готовы не останавливаться на этом, и хотите знать, как задать стили форм в WordPress, я расскажу и об этом.

Только не это!

Мы используем плагины, потому что создание форм в HTML - это очень трудоемкий процесс. Эти плагины обычно содержат свои стандартные стили. Это делается для того, чтобы формы выглядели одинаково хорошо не только в различных браузерах, но и с различными темами, которые будут использоваться на сайте. Давайте рассмотрим в качестве примера популярный плагин Gravity Forms.

Итак, мы добавили пользовательские стили для наших полей ввода формы, а теперь хотим установить на сайте еще и Gravity Forms, как я сделал здесь.

Вам придется внести сразу несколько изменений. Особенно это касается поля со списком, чекбокса и радиокнопки, чтобы все выглядело нормально. Вот, что сделал я для оформления input CSS:

.gform_wrapper .ginput_container_multiselect select {
	background-image: none;
}

.gform_wrapper .gfield_checkbox li input + label,
.gform_wrapper .gfield_radio li input + label {
	margin-left: 0;
	padding-left: 22px;
}

Я удалил изображение, которое мы использовали для списка, а также внес некоторые незначительные изменения для чекбокса и радиокнопки. У нас больше нет контроля над деревом DOM, так как Gravity Forms делает это за нас, поэтому некоторые незначительные корректировки необходимы.

Еще одна причина внести эти изменения заключается в том, что мы загружаем стили, которые поставляются с плагином форм. Но если мы решили не делать этого и хотим использовать только наши CSS input type?

Пользовательские стили CSS для Gravity Forms

Первое, что нам нужно сделать, это отключить стили front-end Gravity Forms. Вот фильтр, который вы можете поместить в файл functions.php:

<?php
// НЕ включайте открывающийся тег php, приведенный выше. Скопируйте только код, приведенный ниже.
/**
 * Отключение стилей GravityForms.
 *
 * Обратный вызов, включенный в ядро WordPress.
 *
 * @see pre_option_rg_gforms_disable_css
 */
add_filter( 'pre_option_rg_gforms_disable_css', '__return_true' );

Затем можно начать задавать собственные стили для вашей конкретной темы. Это долгий и утомительный процесс. У нас есть вариант взять стили, которые мы создали для использования с нашей основной темой, но они также будут работать с другими Sass-темами WordPress. Посмотрите наши SCSS-файлы для Gravity Forms. Если SCSS не ваш конек, вы можете посмотреть CSS-версию.

Примечание: Несколько раз мы использовали в наших стилях свойство flexbox, но если вы хотите обеспечить поддержку в IE 10 или ниже, вам не нужно его добавлять.

Стили формы подписки на новостную рассылку

Посмотрите на эту форму!

Вы можете применить методы, описанные в этой статье для настройки других плагинов форм WordPress, но я работал именно с плагином Gravity Forms.

Первое, что нам нужно сделать, это создать форму. Нам нужны заголовок формы, поле адреса электронной почты и кнопка отправки. Создайте форму или, если вам не хочется с этим возиться, мы уже создали для вас форму, которую можно загрузить и импортировать на свой сайт.

Если вы создаете форму самостоятельно, вам нужно добавить в нее класс newsletter-signup. Я использовал этот класс, чтобы указать конкретную форму как в CSS, так и в JQuery, который мы будем использовать.

Вот правила для input CSS, которые необходимо задать:

.newsletter-signup_wrapper {
	background-color: #fff;
	color: #d5bba4;
	height: 70px;
	margin: 2rem auto;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

.newsletter-signup_wrapper .gform_title {
	background-color: #e85657;
	border: 0 none;
	color: #fff;
	cursor: pointer;
	font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 7rem;
	letter-spacing: 1px;
	overflow: hidden;
	padding: 0 1rem;
	text-align: center;
	text-transform: uppercase;
}

.newsletter-signup_wrapper .button {
	background: #ba997b;
	display: block;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 1.5rem;
	width: 100%;
}

.newsletter-signup_wrapper .button:focus, .newsletter-signup_wrapper .button:hover {
	background: #a9896d;
}

.newsletter-signup_wrapper .gform_body,
.newsletter-signup_wrapper .gform_footer {
	padding: 0 2rem 2rem;
}

.newsletter-signup_wrapper form {
	font-size: 2.4rem;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.newsletter-signup_wrapper label {
	color: #d5bba4;
	font-weight: 700;
	font-size: 2rem;
	padding: 1rem 0 0;
	text-transform: uppercase;
}

.newsletter-signup_wrapper .gform_body,
.newsletter-signup_wrapper .gform_footer {
	line-height: 1.75;
	-webkit-transition: all 0.4s 0.2s;
	transition: all 0.4s 0.2s;
	-webkit-transform: rotateX(-45deg);
	transform: rotateX(-45deg);
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top;
	opacity: 0;
}

.newsletter-signup_wrapper input {
	-webkit-border-radius: 0;
	border-radius: 0;
}

.newsletter-signup_wrapper.open .gform_title {
	cursor: auto;
}

.newsletter-signup_wrapper.open .gform_body,
.newsletter-signup_wrapper.open .gform_footer {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);

В форме из нашего примера используется кнопка для запуска анимации в верхней части, но мы не имеем к этому доступа. Gravity Forms не выводит заголовок, поэтому мы можем использовать это. Мы разместили там элемент со input CSS стилями gform_title, который будет выглядеть как кнопка. Кроме этого мы установили для формы значение line-height, как у этой псевдокнопки. Это позволит нам скрыть форму до тех пор, пока кто-то не кликнет по ней мышью.

Следующий фрагмент головоломки - JQuery:

(function( window, $, undefined ) {
	'use strict';

	var $document = $( document );

	function newsletterSignUp() {

		var $newsletterFormWrap = $( '.newsletter-signup_wrapper' ),
			$newsletterTitle, $newsletterForm, $newsletterFormHeight;

		if ( 0 === $newsletterFormWrap.length ) {
			return;
		}

		$newsletterTitle = $newsletterFormWrap.find( '.gform_title' );

		if ( 0 === $newsletterTitle.length ) {
			return;
		}

		$newsletterForm       = $newsletterFormWrap.find( 'form' );
		$newsletterFormHeight = $newsletterForm.height();

		$newsletterTitle.on( 'click', function() {
			var $that = $( this );

			$newsletterFormWrap.addClass( 'open' ).height( $newsletterFormHeight );
		})
	};

	// Документ готов.
	$document.ready(function() {
		newsletterSignUp();
	});
})( this, jQuery );

Все, что делает этот код - проверяет, есть ли на этой странице конкретная форма, а затем проверяет, существует ли заголовок. Если оба этих условия выполняются, то он просто ждет, когда кого-то кликнет по заголовку. После того, как это произойдет, он добавляет класс open для контейнера формы и устанавливает настоящую высоту формы. Фактическая анимация задается правилами оформления input CSS, которые мы использовали ранее.

Вы можете либо добавить скрипты в файлы вашей темы, либо просто поместить их в новый файл. Если вы выберете второй путь, то нужно будет поставить скрипты в очередь загрузки темы. Вот код, который нужно добавить в файл functions.php:

<?php
// Не добавляйте открывающийся тег <?php

// Регистрируем скрипт адаптивного меню
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
/**
 * Ставим в очередь адаптивный javascript.
 * @todo изменяет 'prefix' на префикс вашей темы
 */
function prefix_enqueue_scripts() {
	wp_enqueue_script( 'newsletter-form', get_stylesheet_directory_uri() . '/js/newsletter-js.js', array( 'jquery' ), '1.0.0', true ); // Change 'prefix' to your theme's prefix
}

Хотите увидеть форму, которую мы только что создали, в действии? Зайдите сюда!

Стили формы подписки на новостную рассылку - 2

Пользовательская форма на основе Gravity Forms после добавления анимации

Это, безусловно, полное руководство по стилям CSS input type. На данный момент у вас есть базовые знания и множество примеров кода, которые помогут создать и настроить свою собственную форму.