Псеўдаклас invalid

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

Сінтаксіс

селектар:invalid {

}

Прыклад

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

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

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

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

псеўдаклас :valid,
які задае стыль інпуту, у які ўвялі правільнае значэнне
псеўдаклас :default,
які задае стыль элементам па змаўчанні
псеўдаклас :in-range,
які задае стыль элементам з зададзеным дыяпазонам значэнняў
псеўдаклас :out-of-range,
які задае стыль элементам, значэнні якіх выходзіць за межы дыяпазона