indeterminate伪类用于设置复选框、单选框或进度条的不确定状态样式，通过CSS选择器匹配，结合JavaScript控制元素状态，实现部分选中或未知进度的视觉反馈，提升用户体验。
HTML中要设置不确定样式，主要是通过
:indeterminate伪类来实现的。这个伪类并不直接在HTML标签里通过属性设置，它是一个CSS选择器，用来匹配那些处于“不确定”状态的表单元素，比如复选框、单选框或者进度条。这种“不确定”状态通常由JavaScript来控制，它代表了一种既非完全选中也非完全未选中的中间态，或者是一个尚无明确进度的过程。
解决方案
indeterminate伪类主要应用于以下几种HTML元素：
-
<input type="checkbox">
: 当一个复选框处于不确定状态时，它既不是被勾选的，也不是完全空白的。通常表现为一个短横线而不是一个勾。这个状态需要通过JavaScript来设置，例如：document.getElementById('myCheckbox').indeterminate = true;。需要注意的是，indeterminate
状态是纯粹的视觉表现，它不影响checked
属性的值（此时checked
仍为false
）。 -
<input type="radio">
: 尽管不如复选框常见，但理论上单选按钮也可以进入indeterminate
状态。不过，在实际应用中很少会用到。 -
<progress>
: 当<progress>
元素没有value
属性时，它就处于不确定状态，表示一个正在进行但具体进度未知的任务。浏览器会渲染一个动画效果来表示这种持续性。
要为这些不确定状态的元素设置样式，你可以使用CSS：
/* 为不确定状态的复选框设置样式 */
input[type="checkbox"]:indeterminate {
/* 比如，改变背景色或边框 */
background-color: #ccc;
border-color: #999;
}
/* 结合自定义样式，例如在不确定状态下显示一个横线 */
/* 这通常需要隐藏默认的复选框，然后用伪元素来模拟 */
input[type="checkbox"] {
-webkit-appearance: none; /* 移除默认样式 */
-moz-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border: 1px solid #aaa;
border-radius: 3px;
position: relative;
cursor: pointer;
}
input[type="checkbox"]:indeterminate::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px; /* 横线的宽度 */
height: 2px; /* 横线的高度 */
background-color: #333;
border-radius: 1px;
}
/* 针对不确定状态的进度条 */
progress:indeterminate {
/* 改变不确定状态下的进度条颜色 */
background-color: lightgray; /* 进度条的轨道颜色 */
/* 针对webkit浏览器 */
&::-webkit-progress-bar {
background-color: lightgray;
}
&::-webkit-progress-value {
background-color: #66b2b2; /* 进度条填充色 */
}
/* 针对firefox浏览器 */
&::-moz-progress-bar {
background-color: #66b2b2;
}
}为什么我们需要“不确定”状态？它在用户体验中扮演什么角色？
我觉得“不确定”状态的存在，某种程度上是设计对现实复杂性的一种妥协和表达。生活里哪有那么多非黑即白、非对即错的选项？很多时候，事情就是处于一种模糊的中间地带。在用户界面中，这种模糊状态尤其重要，它能够非常直观地传达一种“部分选中”或“正在进行但未知”的信息，极大地提升了用户理解的效率。
立即学习“前端免费学习笔记（深入）”；
最典型的应用场景就是层级化的复选框。想象一下，你有一个“全选”的复选框，下面跟着一堆子选项。如果用户只勾选了其中一部分子选项，那么“全选”复选框就不能显示为“已选中”（因为没全选），也不能显示为“未选中”（因为毕竟选了一些）。这时候，一个带有短横线的“不确定”状态就完美地解决了这个问题。它告诉用户：“嘿，这个组里有些东西被选了，但不是全部。”这种视觉反馈避免了用户的困惑，也省去了额外文字说明的麻烦。
对于进度条而言，
indeterminate状态更是不可或缺。很多时候，我们启动一个任务，比如文件上传、数据处理，但我们并不知道总共需要处理多少数据，或者任务何时完成。如果非要显示一个百分比，那简直是误导。一个持续滚动或闪烁的进度条，明确地告诉用户“任务正在进行中，请稍候”，这比一个卡在0%或者干脆不动的进度条要友好得多。它传达了一种“耐心等待”的信号，而不是“系统卡死了”的错觉。所以，它不仅仅是技术上的一个点，更是用户体验设计中，对信息透明度和用户心理预期管理的一种体现。
如何通过JavaScript控制indeterminate
状态？有何注意事项？
控制
indeterminate状态，完全是JavaScript的活儿。就像前面提到的，你不能在HTML里直接写个
indeterminate="true"属性，那是不起作用的。你需要获取到对应的DOM元素，然后直接操作它的
indeterminate属性。
比如，你有一个复选框：
<input type="checkbox" id="myCheckbox">。 要让它进入不确定状态，代码就是：
const myCheckbox = document.getElementById('myCheckbox');
myCheckbox.indeterminate = true;就这么简单，一行代码搞定。
但这里面有些细节需要注意。最重要的一点是：indeterminate
状态是纯粹的视觉表现，它与 checked
属性是独立的。当
indeterminate为
true时，
myCheckbox.checked依然是
false。这意味着，如果你要提交表单数据，你不能仅仅根据
indeterminate状态来判断复选框是否被“选中”了。你仍然需要检查
checked属性。
另外一个需要记住的点是，
indeterminate状态是临时的。一旦你手动改变了复选框的
checked状态（比如用户点击了它，或者你通过JS设置
myCheckbox.checked = true或
myCheckbox.checked = false），那么
indeterminate属性会自动被重置为
false。这意味着如果你想让复选框在用户操作后仍然保持不确定状态，你需要再次通过JS将其设置为
true。这通常发生在用户点击了父级复选框，而你需要根据子级选中情况来动态调整父级状态的场景。
我遇到过不少开发者，刚开始会把
indeterminate误解为
checked的第三种状态，导致逻辑判断出错。它不是数据状态，它更像是一个提示符，告诉用户当前选项组的复杂性。在实际开发中，当你处理复杂的树形结构或多级选择器时，管理好
indeterminate状态的逻辑，尤其是在用户交互后如何更新它，是一个需要细致考虑的地方。
indeterminate
状态的CSS样式实践：如何让它看起来更直观？
让
indeterminate状态看起来直观，这是前端设计师和开发者需要共同面对的挑战。浏览器默认的
indeterminate样式通常就是一个简单的短横线，对于大多数场景来说够用，但有时我们希望它能更好地融入整体设计风格，或者提供更明确的视觉提示。
最常见的做法是自定义复选框的样式。因为原生的复选框样式在不同浏览器下表现不一，而且定制性差。通常我们会隐藏原生的
input元素（使用
-webkit-appearance: none;或
opacity: 0;等），然后用
::before或
::after伪元素来模拟复选框的视觉效果。
当
input[type="checkbox"]:indeterminate匹配到元素时，我们就可以针对这个伪元素进行样式调整，比如：
/* 假设你已经隐藏了原生复选框，并用一个div或label来模拟其外观 */
.custom-checkbox {
/* ... 基础样式 ... */
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 3px;
position: relative; /* 为伪元素定位提供上下文 */
}
/* 当关联的input处于不确定状态时，改变模拟复选框的样式 */
input[type="checkbox"]:indeterminate + .custom-checkbox {
background-color: #e0e0e0; /* 浅灰色背景 */
border-color: #a0a0a0;
}
input[type="checkbox"]:indeterminate + .custom-checkbox::before {
content: ''; /* 必须有content属性才能显示伪元素 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 2px;
background-color: #333; /* 黑色横线 */
border-radius: 1px;
}
/* 如果是选中状态，显示一个勾 */
input[type="checkbox"]:checked + .custom-checkbox::before {
content: '✔'; /* 或者使用SVG图标 */
font-size: 14px;
line-height: 1;
color: #fff;
/* ... 居中定位 ... */
}这种方式给予了我们极大的灵活性。你可以将横线做得更粗，或者改变它的颜色，甚至用一个SVG图标来替代传统的横线，比如一个更具设计感的“部分选中”符号。对于进度条，
progress:indeterminate的样式定制相对简单，主要是通过
::-webkit-progress-bar和
::-webkit-progress-value（针对Chrome/Safari）以及
::-moz-progress-bar（针对Firefox）这些私有伪元素来调整其轨道和填充的颜色。通常，我们会让不确定状态的进度条颜色与确定状态有所区别，或者直接使用浏览器默认的动画效果，因为那已经很能说明问题了。关键在于，视觉上要让用户一眼就能区分出“未选”、“已选”和“部分/不确定”这三种状态，避免混淆。
