CSS псевдокласс :valid

Псевдокласс :valid выделяет элементы форм (например, <input>, <select> и <textarea>), значение которых соответствует правилам валидации, заданным для элемента.

Селектор :valid применяется к элементам форм, которые соответствуют своим ограничениям валидации, например, к элементам <input> с атрибутами min и max, полям электронной почты с корректным адресом, числовым полям с числовым значением, полям URL или даты с корректными данными, а также к обязательным полям с непустым значением.

Версия

HTML Living Standard

HTML5

Selectors Level 4

Синтаксис

Синтаксис CSS :valid

css

:valid {
  css declarations;
}

Пример использования селектора :valid:

Пример кода CSS :valid

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        border: 1px solid #cccccc;
        padding: 5px 10px;
      }
      input:valid {
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:valid selector example</h2>
    <form>
      <input type="email" value="[email protected]" />
    </form>
  </body>
</html>

Try it Yourself »

В приведённом примере стилизация исчезает при вводе некорректного адреса электронной почты.

Практика

В каком случае используется псевдокласс CSS ':valid' и какова его функция?

Псевдокласс ':valid' используется для применения стилей ко всем HTML-элементам, которые соответствуют критериям некорректного ввода согласно правилам валидации форм.Псевдокласс ':valid' применяется к HTML-элементам, прошедшим клиентскую валидацию.Псевдокласс ':valid' изменяет содержимое HTML-элемента.Он используется для стилизации элементов формы в момент отправки формы пользователем.Он может изменять цвет границы полей ввода, когда они содержат корректные данные.

CSS псевдокласс :valid ​

Версия ​

Синтаксис ​

Пример использования селектора :valid: ​

Практика ​

CSS псевдокласс :valid

Версия

Синтаксис

Пример использования селектора :valid:

Практика