:indeterminate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:indeterminate là lớp giả CSS đại diện cho bất kỳ phần tử form nào có trạng thái không xác định, chẳng hạn như các checkbox đã được đặt thành trạng thái indeterminate bằng JavaScript, các radio button là thành viên của một nhóm mà tất cả radio button đều chưa được chọn, và các phần tử <progress> không có thuộc tính value.
css
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
background: lime;
}
Các phần tử được nhắm mục tiêu bởi bộ chọn này là:
- Các phần tử
<input type="checkbox">với thuộc tínhindeterminateđược đặt thànhtrue. - Các phần tử
<input type="radio">có cùng giá trịnamevà không có phần tử nào đượcchecked. - Các phần tử
<progress>không cóvalue, đặt chúng vào trạng thái không xác định.
Cú pháp
css
:indeterminate {
/* ... */
}
Ví dụ
Checkbox và radio button
Ví dụ này áp dụng kiểu đặc biệt cho các nhãn liên kết với các trường form không xác định.
HTML
html
<fieldset>
<legend>Checkbox</legend>
<div>
<input type="checkbox" id="checkbox" />
<label for="checkbox">This checkbox label starts out lime.</label>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div>
<input type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1">First radio label starts out lime.</label>
</div>
<div>
<input type="radio" id="radio2" name="radioButton" value="val2" />
<label for="radio2">Second radio label also starts out lime.</label>
</div>
</fieldset>
CSS
css
input:indeterminate + label {
background: lime;
}
JavaScript
js
const inputs = document.getElementsByTagName("input");
for (const input of inputs) {
input.indeterminate = true;
}
Kết quả
Thanh tiến trình
HTML
html
<progress></progress>
CSS
css
progress {
margin: 4px;
}
progress:indeterminate {
width: 80vw;
height: 20px;
}
Kết quả
Đặc tả
| Specification |
|---|
| HTML # selector-indeterminate |
| Selectors Level 4 # indeterminate-pseudo |
Tương thích trình duyệt
Xem thêm
- Web forms — Working with user data
- Styling web forms
- Thuộc tính
indeterminatecủa phần tử<input type="checkbox"> <input>và giao diệnHTMLInputElementtriển khai nó.- Bộ chọn CSS
:checkedcho phép bạn tạo kiểu cho checkbox dựa trên việc chúng có được chọn hay không