От автора: все знают, как работает стилизация формы CSS. Однако существуют редко используемые селекторы, с помощью которых можно стилизовать поля ввода и окружающие элементы. Некоторые из них довольно новые, другие же доступны уже некоторое время.
placeholder-shown
Первый селектор новый и пока что не обладает полной поддержкой в браузерах. Но его легко можно использовать с техникой прогрессивного улучшения. Селектор позволяет определять видимость плейсхолдера для пользователя в данный момент времени. Может быть полезно для динамического скрытия и отображения лейбла поля ввода.
В демо выше я прячу лейбл, пока пользователь не начнет вводить текст, после чего прячется плейсхолдер. Лейбл показывается с помощью прикольного плавного перехода. Чтобы демо выше работало, лейбл должен идти ПОСЛЕ поля ввода.
|
1 2 3 4 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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. Это можно было сделать на JS, однако я показываю подход на чистом CSS.
|
1 2 3 |
<label for="required-input">Required input</label> <input type="text" id="required-input" required> <span class="help-text"></span> |
|
1 2 3 |
input:required + .help-text::before { content: '*Required'; } |
optional
Противоположность :required. Я опять использую пустой span .help-text для показа необязательного текста, если атрибута required НЕТ.
|
1 2 3 |
input:optional + .help-text::before { content: '*Optional'; } |
disabled
Селектор должен быть знаком большинству. Однако о нем нельзя забывать. Очень важно показывать пользователю, активно поле или нет.
|
1 2 3 4 5 |
&:disabled { border-color: var(--gray-lighter); background-color: var(--gray-lightest); color: var(--gray-light); } |
read-only
Поле с атрибутом readonly имеет немного другой смысл, в отличие от disabled. К счастью, у нас есть этот селектор.
|
1 |
<input type="text" value="Read-only value" readonly> |
|
1 2 3 4 5 |
input:read-only { border-color: var(--gray-lighter); color: var(--gray); cursor: not-allowed; } |
valid
Большая часть валидаторов форм написана на JS, однако мы можем воспользоваться валидацией форм HTML5 и стилизовать соответственно поля. Селектор позволяет стилизовать любое поле, проходящее правила валидации браузера.
Ниже я кодирую svg для отображения чекбокса в поле ввода с помощью свойства background-image.
|
1 2 3 4 |
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='//www.w3.org/2000/svg' xmlns:xlink='//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
Селектор проверяет поле на НЕПРОХОЖДЕНИЕ правил валидации браузера (например, если поле email не содержит электронную почту).
Здесь я кодирую svg для отображения «х» в поле ввода.
|
1 2 3 4 |
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='//www.w3.org/2000/svg' xmlns:xlink='//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"); } |
Я также могу настроить сообщения валидации для каждого типа поля с помощью span .help-text и псевдоэлемента ::before.
|
1 2 3 |
<label for="invalid-email">Invalid input</label> <input type="email" id="invalid-email" value="notanemail"> <span class="help-text"></span> |
|
1 2 3 |
input[type='email']:invalid + .help-text::before { content: 'You must enter a valid email.' } |
in-range/:out-of-range
Селекторы определяют, входит ли введенное число в диапазон min/max или нет.
|
1 2 3 |
<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> |
|
1 2 3 |
input:out-of-range + .help-text::before { content: 'Out of range'; } |
checked
Большинство должны знать этот селектор. С его помощью можно применить кастомную стилизацию к чекбоксам и радио кнопкам, когда они активны. Моя техника стилизации чекбоксов включает создание элемента-обертки и размещение label после input.
|
1 2 3 4 |
<div class="checkbox"> <input type="checkbox"/> <label>Option</label> </div> |
Я визуально прячу input, чтобы он исчез, но оставался кликабельным. Далее я стилизую label::before под чекбокс и label::after под галку. С помощью :checked я стилизую оба псевдоэлемента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
&: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: ''; } |
Знакомство с фреймворком Hi-Q
В моем CSS фреймворке Hi-Q есть парочка полезных стилей для полей, в том числе и чекбоксов, радио кнопок и отключенных полей. С помощью theme builder вы можете визуально следить за изменениями. theme builder – легковесный фреймворк, построенный на CSS переменных, которые можно динамически изменять. Удобно для переключения тем.
Автор: Jonathan Harrell
Источник: //jonathan-harrell.com/
Редакция: Команда webformyself.
