CSS :indeterminate 伪类选择具有不确定状态的用户界面元素。
:indeterminate 伪类选择：
- 不确定属性设置为“true”的复选框（<input type="checkbox">）。
- 单选按钮 (<input type="radio">) 当单选按钮组不包含选中的单选按钮时。
- 没有 value 属性的 Progress 元素 (<progress>)。
复选框的不确定状态只能通过 JavaScript 设置。
单选按钮和进度元素可以在 HTML 中设置。
:checked 伪类用于设置复选框和单选按钮的选中状态的样式。
:indeterminate 伪类可以与其他选择器链接，例如 :hover 为处于不确定状态的元素提供悬停样式。
语法
:indeterminate {
css declarations;
}
:interminate 选择器的例子：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:indeterminate {
box-shadow: 0 0 2px 2px #666;
}
</style>
</head>
<body>
<h2>Indeterminate selector example</h2>
<form>
<input type="checkbox" id="box"> Checkbox
<script>
var checkbox=document.getElementById("box");
checkbox.indeterminate=true;
</script>
</form>
</body>
</html>
在以下示例中，当未选择任何选项时，整个组处于不确定状态。
没有选择任何选项的 :interminate 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
margin-right: .5em;
position: relative;
top: 1px;
}
input[type="radio"]:indeterminate + label {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:indeterminate selector example</h2>
<form>
<input type="radio" name="option" value="yes" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="option" value="no" id="no">
<label for="no">No</label>
<input type="radio" name="option" value="don't know" id="don't-know">
<label for="don't-know">Don't know</label>
</form>
</body>
</html>
日期：2020-06-02 22:14:35 来源：oir作者：oir