:valid

Этот псевдокласс полезен для выделения корректных полей для пользователя.

Зелёный цвет обычно используется для обозначения корректного ввода. Люди с определёнными типами дальтонизма не смогут определить состояние ввода, если оно не сопровождается дополнительным индикатором, не полагающимся на цвет для передачи смысла. Обычно используются описательный текст и/или значок.

• MDN Понимание WCAG, объяснения к пункту 1.4
• Понимание Критерия успеха 1.4.1 | W3C Понимание WCAG 2.0

В этом примере мы используем такие структуры, которые содержат дополнительные <span> для генерации контента; мы будем использовать их для предоставления индикаторов валидных/невалидных данных:

<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

Для предоставления этих индикаторов мы используем следующий CSS:

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

Мы устанавливаем <span> в position: relative, чтобы иметь возможность позиционировать сгенерированный контент относительно них. Затем мы абсолютно позиционируем разный сгенерированный контент в зависимости от того, являются ли данные формы валидными или невалидными — зелёная галочка или красный крестик соответственно. Для добавления некоторой дополнительной наглядности к невалидным данным, мы также задали полям толстую красную границу при невалидности.

Вы можете попробовать ниже:

Обратите внимание, как обязательные текстовые поля невалидны, когда пусты, но валидны, когда в них что-то введено. Поле для электронной почты, с другой стороны, валидно, когда пустое, так как оно необязательное, но невалидно, когда содержит что-то, что не является корректным адресом электронной почты.

• Другие псевдоклассы, связанные с валидацией: :required, :optional, :invalid
• Валидация данных форм
• Доступ к состоянию валидности из JavaScript