Современное оформление форм с использованием CSS

Познакомьтесь с новыми и старыми селекторами, которые вы можете использовать для оформления input-элементов формы в зависимости от того, являются ли поля обязательными, правильно заполненными и т. д., – предлагает Джонатан Харрел. Представляем вам адаптированный перевод его статьи.

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

Посмотреть пример их использования можно здесь.

:placeholder-shown

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

Здесь я скрываю метку, пока пользователь не начнет печатать в input, скрыв плейсхолдер. Для появления метки я использую красивый эффект перехода. Запомните, чтобы это работало, label должен идти ПОСЛЕ input.

<div class="form-group">
 <input type="text" id="dynamic-label-input" placeholder="Enter some text">
 <label for="dynamic-label-input">Enter some text</label>
</div>

.form-group {
 position: relative;
 padding-top: 1.5rem;
}

label {
 position: absolute;
 top: 0;
 font-size: var(--font-size-small);
 opacity: 1;
 transform: translateY(0);
 transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
 opacity: 0;
 transform: translateY(1rem);
}

:required

Используйте этот селектор чтобы показать, что поле имеет атрибут required. Здесь я использую пустой span с классом help-text и помещаю некое содержимое динамически, с помощью псевдоэлемента ::before. Собственно, это может быть сделано с JavaScript, но я включил этот пример чтобы показать метод с использованием чистого CSS.

<label for="required-input">Required input</label>
<input type="text" id="required-input" required>
<span class="help-text"></span>

input:required + .help-text::before {
 content: '*Required';
}

:optional

Если сравнивать с required, этот селектор действует противоположным образом. Я опять использую пустой span с классом help-text для показа какого-то возможного текста, если отсутствует атрибут required.

input:optional + .help-text::before {
 content: '*Optional';
}

:disabled

Этот должен быть знаком большинству из вас, но важно о нем помнить. Показывать, заблокировано ли поле для пользователя, очень важно.

&:disabled {
 border-color: var(--gray-lighter);
 background-color: var(--gray-lightest);
 color: var(--gray-light);
}

:read-only

Input с атрибутом readonly должен передавать немного другое значение, чем disabled. Хорошо, что для этой цели есть такой селектор.

<input type="text" value="Read-only value" readonly>

input:read-only {
 border-color: var(--gray-lighter);
 color: var(--gray);
 cursor: not-allowed;
}

:valid

Хотя большая часть проверки формы будет осуществляться с помощью JavaScript, мы можем воспользоваться преимуществом HTML5 как для проверки формы, так и для оформления поля ввода. Этот селектор дает нам возможность придать стили любому input, который в настоящее время проходит встроенные правила проверки браузера.

Здесь я пишу код для svg чтобы, используя свойство background-image, отображать галочку в поле ввода.

input:valid {
 border-color: var(--color-primary);
 background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

:invalid

Этот селектор проверяет, является ли input НЕ проходящим встроенные правила проверки браузера (например, если введенный адрес электронной почты не содержит настоящего email).

И снова я добавляю код для svg чтобы отображать «Х» в поле ввода.

input:invalid {
 border-color: var(--color-error);
 background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

Также можно настроить некоторые проверочные сообщения для каждого типа input, воспользовавшись span с классом help-text и псевдоэлементом ::before.

<label for="invalid-email">Invalid input</label>
<input type="email" id="invalid-email" value="notanemail">
<span class="help-text"></span>

input[type='email']:invalid + .help-text::before {
 content: 'You must enter a valid email.'
}

:in-range/:out-of-range

Эти селекторы определяют, находится ли значение числового поля в пределах указанных минимальных/максимальных значений.

<label for="out-of-range-input">Out-of-range input</label>
<input type="number" id="out-of-range-input" min="1" max="10" value="12">
<span class="help-text"> (value must be between 1 and 10)</span>

input:out-of-range + .help-text::before {
 content: 'Out of range';
}

:checked

Вероятно, вам знаком этот селектор. Он дает возможность применить пользовательские стили к чекбоксам и радиокнопкам. Моя техника оформления чекбоксов включает создание встроенного элемента и помещения label после input.

<div class="checkbox">
 <input type="checkbox"/>
 <label>Option</label>
</div>

Я зрительно прячу input, так что он исчезает из поля зрения, но все еще кликабелен. Затем я оформляю label::before так чтобы он выглядел как поле чекбокса, а label::after – как галочка. Я использую селектор :checked для соответствующего оформления этих двух псевдоэлементов.

&:checked + label::before {
 background-color: var(--color-primary);
}

&:checked + label::after {
 display: block;
 position: absolute;
 top: 0.2rem;
 left: 0.375rem;
 width: 0.25rem;
 height: 0.5rem;
 border: solid white;
 border-width: 0 2px 2px 0;
 transform: rotate(45deg);
 content: '';
}

***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]