Đây :user-invalid
là một lớp giả CSS đang được đề xuất trong bản nháp làm việc Cấp 4 của Bộ chọn CSS, chọn một phần tử biểu mẫu dựa trên việc liệu giá trị do người dùng nhập vào có hợp lệ hay không khi được kiểm tra so với giá trị được chỉ định là giá trị được chấp nhận trong đánh dấu HTML sau khi người dùng cuối đã tương tác với biểu mẫu ngoài đầu vào đó. Trên thực tế, :user-invalid
nó được gọi là “Lớp giả tương tác người dùng” bởi vì nó là duy nhất trong việc xác định hành động của người dùng trong việc chọn một phần tử.
Thực hiện đánh dấu HTML sau cho biểu mẫu cơ bản với trường số:
Định lượng:
Phạm vi số được đặt bởi đánh dấu HTML cho đầu vào nằm giữa 1
và 10
nhưng giá trị mặc định đã được đặt thành 11
. Điều đó có nghĩa là giá trị không hợp lệ ngay khi biểu mẫu tải.
Tuy nhiên, lớp :user-invalid
giả sẽ không có hiệu lực cho đến khi người dùng thực sự tương tác với biểu mẫu ngoài việc nhập nó vào trường. Sự tương tác đó là sự khác biệt giữa :user-invalid
và :invalid
. Nguyên tắc tương tự cũng áp dụng cho các giá trị biểu mẫu đã nhập được đặt bởi :in-range
, :out-of-range
và :required
.
Khi giá trị mà người dùng đã nhập được xác định là mục nhập không hợp lệ, chúng tôi có thể chọn phần tử:
input:user-invalid ( color: red; )
Hình ảnh sau minh họa các trạng thái khác nhau giữa :valid
và :user-invalid
dựa trên ví dụ HTML ở trên.


Điều khó hiểu ở đây là liên quan chặt chẽ :invalid
và có liên quan như thế nào :user-invalid
. Nếu được sử dụng cùng nhau, có thể khó phân biệt hai loại:
input:invalid ( color: red; ) input:user-invalid ( color: red; )


:invalid
(giữa) và một giá trị không hợp lệ do người dùng (bên phải) nhập vào có thể khó phân biệt
Việc sử dụng cái này thay cho cái kia hoặc có kiểu dáng khác biệt giữa hai cái có thể chứng tỏ là trải nghiệm người dùng tốt hơn trong trường hợp sử dụng thực tế.
Hỗ trợ trình duyệt
:user-invalid
hiện không được hỗ trợ nhưng được đề xuất trong bản nháp làm việc CSS Selectors Level 4.
Firefox sử dụng một thuộc tính không chuẩn có tiền tố -moz-ui-invalid
áp dụng các tiêu chuẩn tương tự.
Có liên quan
:invalid
:valid
Thêm thông tin
- Bộ chọn CSS Đặc điểm kỹ thuật cấp 4
- Đặc điểm kỹ thuật MDN cho
:-moz-ui-invalid