От автора: давайте разберем несколько псевдоклассов, заточенных специально под поля формы и введенные данные. С помощью этих псевдоклассов можно стилизовать поля по валидности введенных данных (есть ли у поля атрибут required или enabled).
Все представленные в статье псевдоклассы разработаны для форм, что позволяет не писать длинные селекторы. Если просто использовать :enabled, это не окажет никакого влияния на элементы span. Сужение области поиска по селекторам бывает полезно, когда необходимо стилизовать различные типы полей формы.
enabled и disabled
По названию можно понять, что эти псевдоклассы находят элементы по HTML5 атрибуту disabled (или по его отсутствию). Данные псевдоклассы можно использовать на полях типа input, select, button и fieldset:
|
1 |
<button type="submit" disabled>Save draft</button> |
Элементы формы активны по умолчанию. То есть они отключаются только, если установлен атрибут disabled. Запись формы input:enabled найдет все теги input без атрибута disabled. И наоборот, запись button:disabled найдет все кнопки с атрибутом disabled:
|
1 2 3 |
button:disabled { opacity: .5; } |
На рисунке ниже показаны состояния :enabled и :disabled для тега button.
required и optional
Состояния required и optional обусловлены наличием или отсутствием атрибута required у поля. Например:
|
1 2 3 4 |
<p> <label for="email">E-mail:</label> <input type="email" id="email" name="email" placeholder="example: jane.doe@example.com" required> </p> |
Большинство браузеров показывают, что поле обязательно только после отправки формы. Псевдокласс :required позволяет показывать пользователю, что поле обязательно еще до отправки данных. Например, CSS код ниже добавляет желтую рамку к полю email из кода сверху. Скриншот показан ниже:
|
1 2 3 |
input:required { border: 1px solid #ffc107; } |
Класс optional работает схожим образом и находит элементы, у которых нет атрибута required. Например, CSS код ниже дает нам следующий результат.
|
1 2 3 |
select:optional { border: 1px solid #ccc; } |
checked
В отличие от рассмотренных псевдоклассов :checked применяется только к радиокнопкам и чекбоксам. По имени можно сообразить, что данный псевдокласс позволяет стилизовать выбранные поля.
К большому сожалению, стилизация радиокнопок и чекбоксов в большинстве браузеров похожа на приятную поездку к стоматологу. Спецификация CSS Basic User Interface Module Level 4 пытается решить эту проблему с помощью свойства appearance, однако это свойство пока что нигде не поддерживается. В WebKit/Blink браузерах и Firefox поддерживается нестандартная версия свойства с вендорными префиксами.
Для создания кастомных радиокнопок и чекбоксов, которые будут хорошо работать во всех браузерах, нужно умно подойти к селекторам. Для создания кастомных радиокнопок и чекбоксов мы возьмем смежный комбинатор, псевдоэлемент и :ckecked. Например, чтобы изменить стили лейбла, когда привязанная к нему кнопка находится в активном состоянии, можно взять следующий CSS:
|
1 2 3 4 |
[type=radio]:checked + label { font-weight: bold; font-size: 1.1rem; } |
Лейбл становится жирным, и увеличивается размер шрифта, когда радиокнопка активна. Элемент можно улучшить с помощью псевдоэлемента ::before, заданного тегу label. С помощью этого псевдоэлемента можно вставлять кастомные поля:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[type=radio] { opacity: 0; } [type=radio] + label::before { background: #fff; content: ''; display: inline-block; border: 1px solid #444; height: 1.2rem; margin-right: 1em; vertical-align: middle; width: 1.2rem; } [type=radio]:checked + label::before { background: #4caf50; } |
Так мы получаем пользовательские поля формы, которые можно увидеть ниже.
Эта техника будет работать только при правильном структурировании HTML:
тег label должен быть смежным со своим полем формы;
у поля формы должен быть атрибут id помимо name (например, <input type=»radio» id=»chocolate» name=»flavor»>);
у тега label должен быть атрибут for, и его значение должно совпадать с id поля формы (например, <label for=»chocolate»>Chocolate</label>).
Привязка лейблов через for к полям формы обеспечивает активацию поля формы по клику на сам лейбл или его дочерний псевдоэлемент (::before).
in-range и out-of-range
Псевдоклассы in-range и out-of-range можно использовать на полях range, number и date. С классами in-range и out-of-range необходимо использовать атрибуты min и/или max. Пример с полем типа number:
|
1 2 3 4 |
<p> <label for="picknum">Enter a number from 1-100</label> <input type="number" min="1" max="100" id="picknum" name="picknum" step="1"> </p> |
Добавим немного CSS. Будем менять стили, если значения входят или выходят за рамки диапазона от 1 до 100:
|
1 2 3 4 5 6 7 |
: out-of-range { background: #ffeb3b; } :in-range { background: #fff; } |
Если ввести -3 или 101, фоновый цвет #picknum поменяется на желтый, как прописано в нашем правиле out-of-range (см. рисунок ниже). Если значение остается в рамках диапазона, фон останется белым, как задано в правиле :in-range.
:valid и :invalid
С помощью псевдоклассов :valid и :invalid можно стилизовать поля формы по определенным условиям. Проверочные ограничения накладываются с помощью атрибутов type и pattern. Например, поле type=»email» не пройдет валидацию, если пользователь введет «foo 123». Пример показан ниже.
Поле формы не пройдет валидацию при следующих условиях:
пустое обязательное поле;
введенные данные не соответствуют ограничениям по type и pattern;
введенные данные выпадают за рамки атрибутов min и max.
Необязательные пустые поля валидны по умолчанию. Если введенные данные удовлетворяют условиям поля, поле валидно.
Поля формы могут принимать несколько состояний за раз. Так что, возможно, придется разграничивать специфичность (в следующем разделе) и решать конфликты с каскадированием. Один из способов – ограничение используемых в проектах псевдоклассов. Например, не прописывайте optional, если используете valid.
Псевдоклассы также можно сцеплять. Например, псевдоклассы :focus и :invalid можно совместить, чтобы стилизовать элемент только, когда он имеет фокус: input:focus:invalid. Сцепка псевдоклассов позволяет стилизовать элементы с несколькими состояниями.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
