Псевдокласс invalid

Псевдокласс invalid задает стиль для инпута, в который ввели неправильное значение или значение не соответствующее указанному типу.

Синтаксис

cssселектор:invalid {

}

Пример

Давайте перекрасим фон инпута в розовый цвет, когда вводится неправильное значение и обратно в зеленый цвет, когда значение прошло проверку на соответствие выбранного типа:

html<p>Enter Your email</p>
<p><input type="email"></p>

cssinput:invalid {
  background: #E37D76;
}
input:valid {
  background: #9DDFA4;
}

Результат:

Смотрите также