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

Опубликовано: 16 июля 2015 Обновлено: 21 января 2022 0 комментариев

Псевдокласс — это ключевое слово, которое добавляется к css-селектору (любому элементу веб-страницы) и определяет его особое состояние. Например, с помощью псевдокласса :hover можно изменить стиль элемента при наведении на него курсора мыши.

Виды псевдоклассов

1. Псевдокласс :read-only

Псевдокласс :read-only отбирает html-элементы, для которых задан атрибут readonly — элементы <input> и <textarea>, а также для любого элемента, для которого установлен атрибут contenteditable. Не поддерживается в Internet Explorer, Firefox поддерживает альтернативный псевдокласс :-moz-read-only.

input:read-only:before {
  content: "?";
  color: coral;
}
input:-moz-read-only:before {
  content: "?";
  color: coral;
}

2. Псевдокласс :optional

Псевдокласс :optional отбирает элементы формы, для которых не задан атрибут required. Это могут быть элементы <input>, <select> и <textarea>. Поддерживается в Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, Android и iOS.

textarea:optional:hover {
  background: #f5f5f5;
  border: 1px solid #eee;
}

3. Псевдокласс :required

required
Рис. 1. Как работает псевдокласс :required

Псевдокласс :required отбирает элементы формы, для которых установлен атрибут required. Это элементы <input>, <select> и <textarea>. Благодаря этому псевдоклассу можно привлечь внимание к полям формы, обязательным для заполнения. Поддерживается в Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, Android и iOS.

input:required {
  color: salmon;
  font-weight: bold;
}

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

Псевдоэлемент ::placeholder отвечает за замещающий текст-подсказку, выводящийся внутри элементов <input> и <textarea>. В большинстве браузеров цвет замещающего текста по умолчанию светло-серого оттенка. С помощью псевдоэлемента ::placeholder можно изменить такие свойства, как font, color, добавить тень, подчеркивание и т.д. во всех случаях, кроме <input type="datetime-local"> и <input type="date">.

Браузеры имеют свою собственную реализацию псевдоэлемента ::placeholder, поэтому необходимо добавлять браузерные префиксы. В зависимости от браузера, текст-заполнитель может исчезать, когда поле ввода принимает фокус, например, в IE10+. Поддерживается во всех браузерах, в Internet Explorer 10+.

::-webkit-input-placeholder {color:#f00;} /* Chrome/Opera/Safari */
::-moz-placeholder {color:#f00;} /* Firefox 19+ */
:-ms-input-placeholder {color:#f00;} /* IE 10+ */
:-moz-placeholder {color:#f00;} /* Firefox 18- */

5. Псевдокласс :in-range

Выбирает поля формы с установленным диапазоном ограничения, заданным атрибутами min и max. Поддерживается в Chrome 10+, Firefox 28+, Safari 5.5+, Opera 11+, Android и iOS. Не работает в Internet Explorer.

input[type="number"]:in-range {
  background: lightblue;
}

6. Псевдокласс :invalid

Выбирает элементы <input>, значение которых является недопустимым согласно его типу, указанному в атрибуте type. Например, поле <input type="number"> не может содержать буквы, а <input type="email"> должно содержать валидный адрес электронной почты. Поддерживается в Chrome 10+, Firefox 4+, IE 10+, Safari 5+, Opera 10+ и iOS.

input[type="number"]:invalid {
  background: tomato;
}

7. Псевдокласс :out-of-range

Используется для стилизации элементов, имеющих ограничения на ввод значений в случае, когда вводимое значение элемента неизбежно выходит за пределы указанного диапазона. Поддерживается в Chrome 10+, Firefox, 28+. Safari, Opera 11+, Android и iOS. Не работает в Internet Explorer.

input[type="number"]:out-of-range {
  background: silver;
}

8. Псевдокласс :read-write

Выбирает элементы формы, которые доступны для редактирования пользователем. К этой категории относятся элементы <textarea> И <input>, для которых не заданы атрибуты readonly или disabled, а также другие элементы, для которых задан атрибут contenteditable:

<input type="text">
<input type="number">
<textarea name="word" id="id" cols="30" rows="10"></textarea>
<div contenteditable></div>

Поддерживается в Chrome, Safari, Opera 14+ и iOS. Firefox поддерживает альтернативное :-moz-read-write. Не работает в Internet Explorer и на Android.

textarea:read-write {
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
}
textarea:read-write:before {
  content: "Введите текст сюда...";
  color: #d9d9d9;
}

9. Псевдокласс :valid

Выбирает элементы формы, введенные значения которых соответствуют типу, указанному в атрибуте type или находящиеся в разрешенном диапазоне:

  • поля формы для ввода адреса электронной почты;
  • поля формы для ввода url-адресов;
  • поля формы, предполагающие введение числового значения, с указанием диапазона с помощью атрибутов min и max.

Поддерживается в Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, Internet Explorer 10+ и на iOS.

input[type="number"]:valid {
  background-color: lightgreen;
}                   
input:valid {
  box-shadow: 0 0 3px 5px rgba(0, 200, 0, .2);
}
input:valid:focus {
  outline: 0;
  border: none;
  box-shadow: 0 0 3px 6px rgba(0, 200, 0, 0.3);
}

Поделиться: