Псеўдаклас invalid

Псеўдаклас invalid задае стыль для інпута, у які ўвялі няправільнае значэнне або значэнне якое не адпавядае паказанаму тыпу.

Сінтаксіс

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

}

Прыклад

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

html<p>Увядзіце Ваш email</p>
<p><input type="email"></p>

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

Результат:

Глядзіце таксама