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

Псевдоэлемент  ::placeholder

Псевдоэлемент  ::placeholder позволит вам оформить внешний вид текста, который выводится с помощью атрибута placeholder для любого текстового поля формы. Как правило, используются теги <input> атрибутом  type="text" или "email", но также их часто можно встретить в полях типа "url" или "search":

Для того чтобы стилизовать псевдоэлемент ::placeholder пока еще необходимо использовать вендорные префиксы для разных браузеров:

Поддержку этого псевдоэлемента можно посмотреть на сайте caniuse.com

Пример ниже показывает, как можно изменить цвет шрифта во всех полях формы.

See the Pen Псевдоэлемент ::placeholder by Elen (@ambassador) on CodePen.

В примере поле с type="search" имеет другой цвет текста в placeholder. Чтобы изменить цвет для определенного типа поля,  необходимо записать стили этого псевдоэлемента так:

Плюс к основному правилу для поддержки более старых браузеров, необходимо добавить все вендорные префиксы:

Если рассмотреть синтаксис чуть пристальней, то мы увидим, что часть браузеров использует псевдоэлемент ::placeholder с двумя двоеточиями, а другая часть - псевдокласс  :placeholder с одним двоеточием перед названием.

Важный момент: в css-правилах вы можете использовать не все свойства, а только те, что перечислены ниже:

• color
• font и все связанные свойства (font-size, font-family и т.д.)
• text-decoration
• text-indent
• text-overflow
• text-transform
• line-height
• word-spacing
• letter-spacing
• background и все связанные свойства (background-color, background-image и т.д.)
• opacity
• vertical-align

В основном, это свойства, так или иначе связанные с форматированием текста.

Псевдокласс :placeholder-shown

Кроме псевдоэлемента  ::placeholder в стандарте CSS существует еще псевдокласс :placeholder-shown, посмотреть поддержку которого можно также на сайте caniuse.com.

Отличие  :placeholder-shown от  ::placeholder заключается в том, что оформление с помощью :placeholder-shown работает только тогда, когда в полях input и textarea виден текст заполнителя, т.е. значение атрибута placeholder. Когда пользователь начинает вводить текст, это оформление меняется на стандартное или описанное в стилях для данной страницы/сайта.

Посмотрите пример в действии. Для этого нужно набрать какой-либо текст в поле ввода (<input>) или в текстовой области (<textarea>).

Отличный пример использования этого свойства можно продемонстрировать для первоначального скрытия текста метки поля (label), а затем анимированного ее перемещения в конец поля. Т.е. когда мы видим текст из атрибута placeholder, нам текст в label не нужен - поэтому он скрыт (свойство opacity: 0). Как только пользователь начинает вводить текст, заполняя поле, текст из placeholder автоматически пропадает, зато выезжает label и размещается в качестве подсказки в конце поля.

See the Pen Псевдокласс :placeholder-shown by Elen (@ambassador) on CodePen.

Цвет каретки

Теперь можно в CSS задать цвет каретки, т.е. курсора, который мерцает при вводе текста. Для этого нужно использовать свойство caret-color. Поддержка в современных браузерах пока не очень четкая, но последние версии и Firefox, и Chrome, и Safari, и Opera, причем и для ОС Android и iOS уже поддерживают это свойство. Отстает Microsoft Edge и IE и Opera Mini.

В примере ниже вы можете увидеть разницу между черной и синей кареткой.

Псевдоклассы :required и :optional

В HTML появился очень удобный атрибут required для обязательных к заполнению элементов форм. Ему соответству в CSS псевдокласс :required, который позволяет выделить нужным вам образом все обязательные поля. Другой псевдокласс - :optional, напротив, находит любые элементы <input> , у которых не установлен атрибут required. Он позволяет задавать необязательным элементам формы другие стили.

Попробуем на примере использовать псевдоклассы:required и :optional. Выделим разными рамками обязательные и необязательные поля. Кроме того, используем привычную для всех звездочку для указания на обязательное поле, но не в виде текста, а в виде псевдоэлемента ::after для элемента label.

Для использования этого селектора нам понадобилось разместить label после input. Визуально поменяем их местами, назначив родительскому элементу p с классом .group-field свойство display: flex, а вложенному в него элементу input свойство order:1, использовав преимущества разметки с помощью модели Flexbox:

Пример формы с обязательными и необязательными полями:

See the Pen Псевдоклассы :required и :optional by Elen (@ambassador) on CodePen.

Псевдокласс :checked

Все предыдущие свойства относились к оформлению текстовых полей и областей. Однако спецификация не обошла вниманием флажки и переключатели (или радио-кнопки). Как правило, их нужно отмечать или выбирать, т.е. назначать атрибут checked. Поэтому в CSS3 появился псевдокласс :checked. С его помощью мы можем стилизовать выбранные элементы формы.

Рассмотрим такой пример:

See the Pen Псевдокласс :checked by Elen (@ambassador) on CodePen.

При клике на любом флажке или переключателе текст в элементе label, привязанном к нему становится жирным и выделяется другим цветом. И все это за счет работы псевдокласса :checked:

Поскольку нам нужно отформатировать именно текст в label, здесь использован соседний селектор (input:checked + label).  Для того чтобы задать форматирование только для радио-кнопок, можно использовать селектор атрибута: