Bộ :invalidchọn cho phép bạn chọn các phần tử không chứa nội dung hợp lệ, được xác định bởi typethuộc tính của nó . :invalidđược định nghĩa trong thông số kỹ thuật Cấp 3 của Bộ chọn CSS là “bộ chọn giả hợp lệ”, nghĩa là nó được sử dụng để tạo kiểu cho các phần tử tương tác dựa trên đánh giá đầu vào của người dùng.
Bộ chọn này có một công dụng cụ thể: cung cấp cho người dùng phản hồi trong khi họ đang tương tác với một biểu mẫu trên trang. Ví dụ bên dưới sử dụng CSS để chuyển các trường "Email" thành màu đỏ hoặc xanh lục, phản hồi xem nội dung có khớp với mẫu địa chỉ email hợp lệ hay không:
Lưu ý cách đầu tiên (“Email”) có màu xanh lục-hợp lệ-ngay cả khi không có nội dung trong trường. Điều này là do đầu vào là tùy chọn, vì vậy để trống sẽ dẫn đến việc gửi biểu mẫu hợp lệ. Để khắc phục hành vi này, thứ hai có thuộc tính "bắt buộc", có nghĩa là trường trống sẽ dẫn đến việc gửi biểu mẫu không hợp lệ.
Điểm quan tâm
:invalidcó thể được “xâu chuỗi” với các bộ chọn giả khác: thích:focuschỉ xác thực khi người dùng đang nhập:beforehoặc:aftertạo biểu tượng hoặc văn bản để cung cấp thêm phản hồi của người dùng hoặc bộ chọn thuộc tínhinput(value="")chỉ thích xác thực các trường nhập có nội dung.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Không | Không |
:invalidđã được giới thiệu trong Mô-đun 3 của Bộ chọn CSS, có nghĩa là các phiên bản cũ của trình duyệt không hỗ trợ nó. Tuy nhiên, hỗ trợ trình duyệt hiện đại ngày càng tốt hơn. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hãy polyfill hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị.