CSS :indeterminate 选择器 详解
css3基础 2023-07-22 16:43:42小码哥的IT人生shichen
CSS :indeterminate 选择器
实例
为不确定状态的 input 添加红色阴影色：
input:indeterminate { box-shadow: 0 0 1px 1px red; }
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
input:indeterminate {
box-shadow: 0 0 1px 1px red;
}
</style>
</head>
<body>
<h1>indeterminate 选择器</h1>
<p>下面的复选框处于不确定状态（通过 JavaScript）。如果单击它，它的状态将变为“已选中”，并失去其红色阴影颜色，因为它不再是不确定的。</p>
<p>请注意，不确定的复选框拥有“-”图标，而不是复选标记或空白框。</p>
<input type="checkbox" id="myCheckbox"> 复选框
<script>
// 通过 JavaScript 使复选框处于不确定状态
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
:indeterminate 选择器用于选择处于不确定状态的表单元素。
:indeterminate 选择器只能用于以下元素：
- <input type="checkbox">
- <input type="radio">
- <progress>
注释：复选框不能用HTML不确定-它是复选框对象的属性，可以通过JavaScript设置为true。
如果未选中表单中具有相同名称值的所有单选按钮，则单选按钮不确定。
注释：通过 HTML，复选框无法处于不确定态 - 它是 checkbox 对象的属性，可由 JavaScript 设置为 true。
如果表单中有相同值的所有单选按钮都未被选中，那么按钮按钮处于不确定状态。
| 版本： | CSS3 |
|---|
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
| 选择器 | |||||
|---|---|---|---|---|---|
| :indeterminate | 39.0 | Yes | 51.0 | Yes | Yes |
CSS 语法
:indeterminate {
css declarations;
}