:indeterminatelà một bộ chọn lớp giả trong CSS được đặt tên cho trạng thái không được chọn hoặc không được chọn. Đó là trạng thái ở giữa mà chúng tôi có thể xem xét các tùy chọn "Có thể" giữa "Có" và "Không". Trạng thái không được xác định đầy đủ, do đó có tên: không xác định.
Hộp kiểm không xác định
Nơi phổ biến nhất mà chúng ta có thể thấy điều này khi chơi là với các hộp kiểm trong một biểu mẫu:
Có một số điều kỳ quặc :indeterminatekhi nói đến hộp kiểm đáng lưu ý trước khi tìm hiểu cách nó có thể được chọn trong CSS.
Nó không thể được đặt trong HTML
Trước hết, không có cách nào để đặt hộp kiểm thành trạng thái không xác định trong HTML. Trong ví dụ mở đầu ở trên, chúng tôi có thể đặt hộp kiểm thứ hai thành hộp kiểm bằng cách nói rõ ràng như vậy trong HTML.
Chỉ hợp lý khi giả sử chúng ta có thể làm tương tự với trạng thái không xác định:
Nhưng, đáng buồn thay, đó không phải là trường hợp, vì vậy không sử dụng ví dụ cuối cùng đó trong mã của bạn.
Tại thời điểm viết bài này, Javascript là phương tiện duy nhất để thiết lập trạng thái không xác định trên hộp kiểm. Một cách để tiếp tục là chọn một hộp kiểm cụ thể theo ID:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Hạn chế của ví dụ trên là hộp kiểm không bao giờ có thể quay trở lại trạng thái không xác định khi nó chuyển sang trạng thái khác. Thay vào đó, chúng tôi có thể xoay vòng giữa các trạng thái đã kiểm tra, không kiểm tra và không xác định:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Xem hộp kiểm Pen Rotate States của Geoff Graham (@geoffgraham) trên CodePen.
Nó hoàn toàn là một trạng thái trực quan
Hộp kiểm vẫn chỉ tính xem nó đã được chọn hay chưa được chọn, bất kể chúng ta đã kích hoạt trạng thái không xác định hay chưa. Nói cách khác, không xác định che dấu giá trị thực của hộp kiểm và không được tính là giá trị của chính nó.
Giao diện mặc định của nó không nhất quán trên các trình duyệt
Giống như đầu vào số, trạng thái không xác định không tạo kiểu nhất quán trong mọi trình duyệt.
Tuy nhiên, nhìn chung, đây là sự hỗ trợ cho các hộp kiểm không xác định.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12,2-12,4 |
Các nút radio không xác định
:indeterminate có thể áp dụng cho các nút radio ở cấp độ nhóm, trong đó toàn bộ nhóm được coi là ở trạng thái không xác định nếu không có tùy chọn nào được chọn.
Xem Các nút radio đề cử cây bút của Geoff Graham (@geoffgraham) trên CodePen.
Chúng ta nên lưu ý rằng việc sử dụng :indeterminatecó thể không phải là lựa chọn tốt nhất theo trải nghiệm người dùng.
Thanh tiến trình không xác định
Chúng tôi cũng có thể áp dụng :indeterminatecho phần tử không có giá trị nào được đặt rõ ràng trong HTML. Không cần Javascript, nhưng việc tạo kiểu cho phần tử tự nó là một việc phức tạp, đòi hỏi nhiều công sức và cân nhắc về tính nhất quán giữa các trình duyệt.
Xem Yếu tố tiến trình không xác định của Bút của Geoff Graham (@geoffgraham) trên CodePen.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Thêm thông tin
- Bộ chọn CSS Bản thảo làm việc cấp 4
- Hộp kiểm không xác định
- Các nút radio không xác định
- Phần tử tiến trình HTML5