: người dùng không hợp lệ - Thủ thuật CSS

Anonim

Đây :user-invalidlà 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-invalidnó đượ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 110như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-invalidgiả 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: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: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:user-invaliddựa trên ví dụ HTML ở trên.

Sự khác biệt giữa giá trị hợp lệ (bên trái) và giá trị không hợp lệ do người dùng nhập sau khi tương tác với biểu mẫu.

Điều khó hiểu ở đây là liên quan chặt chẽ :invalidvà 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; )
Sự khác biệt giữa :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