:user-invalid
Baseline
2023
Newly available
Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Lớp giả :user-invalid trong CSS đại diện cho bất kỳ phần tử biểu mẫu đã được kiểm tra hợp lệ nào mà giá trị của nó không hợp lệ dựa trên các ràng buộc kiểm tra hợp lệ, sau khi người dùng đã tương tác với nó.
Lớp giả :user-invalid phải khớp với phần tử :invalid, :out-of-range, hoặc phần tử trống nhưng có :required trong khoảng thời gian từ khi người dùng cố gắng gửi biểu mẫu đến trước khi người dùng tương tác lại với phần tử biểu mẫu đó.
Cú pháp
:user-invalid {
/* ... */
}
Ví dụ
Đặt màu sắc và ký hiệu cho :user-invalid
Trong ví dụ sau, viền đỏ và ❌ chỉ hiển thị khi người dùng đã tương tác với trường. Hãy thử nhập nội dung không phải địa chỉ email để xem hiệu ứng.
<form>
<label for="email">Email *: </label>
<input id="email" name="email" type="email" required />
<span></span>
</form>
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: "✖";
color: red;
}
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |