Вы здесь: Главная » HTML » Формы » Псевдоклассы и псевдоэлементы для оформления элементов форм

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

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

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

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

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

Поддержка ::placeholder на caniuse.com

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

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

В примере поле с 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-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.18892

Цвет каретки

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

Поддержка свойства caret-color

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

Псевдоклассы :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.18892

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

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

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

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

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

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

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *