Pseudo-class invalid

Pseudo-class invalid xác định kiểu dáng cho input khi người dùng nhập giá trị không đúng hoặc giá trị không phù hợp với loại đã chỉ định.

Cú pháp

bộ_chọn:invalid {

}

Hãy đổi màu nền của input thành màu hồng khi nhập giá trị sai và trở lại màu xanh lá khi giá trị đã vượt qua kiểm tra phù hợp với loại đã chọn:

<p>Nhập email của bạn</p>
<p><input type="email"></p>

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

pseudo-class :valid,
xác định kiểu dáng cho input khi giá trị nhập vào đúng
pseudo-class :default,
xác định kiểu dáng cho các phần tử mặc định
pseudo-class :in-range,
xác định kiểu dáng cho các phần tử có giá trị nằm trong khoảng xác định
pseudo-class :out-of-range,
xác định kiểu dáng cho các phần tử có giá trị nằm ngoài khoảng xác định