input:indeterminate样式生效的前提是必须设置appearance: none；否则原生控件不响应css；且需用js设置elem.indeterminate = true触发状态，配合::before自定义半选图标并同步aria-checked="mixed"。
为什么直接写 input:indeterminate 样式没反应
不是选择器错了，是你在跟浏览器原生控件“硬刚”：原生 <input type="checkbox"> 的半选图形（比如横杠或灰色方块）由操作系统或 UA 样式私有渲染，background-color、border、color 这些对它完全无效。写了 input:indeterminate { background: red; } 却没加 appearance: none，这行 CSS 实际上没作用在可见区域上。
另外，主流 UI 框架（如 Element Plus、Ant Design）封装了 DOM 结构，:indeterminate 只匹配原生 input 元素；如果你的样式选择器是 input:indeterminate，而框架用了 .el-checkbox input 这类高优先级规则，你的样式就会被覆盖。
input:indeterminate 必须配合 appearance: none 才能生效
这是最小前提，缺一不可。不移除默认外观，所有后续伪元素绘制都无从谈起。
-
input[type="checkbox"] { appearance: none; -webkit-appearance: none; }—— 必须显式清除所有平台默认样式 - 清除后，
input元素本身变成一个“透明容器”，视觉完全靠你用::before或::after重绘 - 注意：设了
appearance: none后，accent-color对:indeterminate完全失效，别指望它改半选色
用 ::before 绘制半选图标要满足三个条件
只写 content: "" 不够，浏览器不会自动把它显示出来。
-
display: block或inline-block—— 必须设为块级才能撑开尺寸 -
width和height显式声明 —— 比如width: 8px; height: 2px;画一条横杠 - 定位需配合父元素尺寸 —— 常见做法是设
margin: 5px auto 0居中，或用position: absolute配合label包裹结构
示例：
input[type="checkbox"]:indeterminate::before {
content: "";
display: block;
width: 8px;
height: 2px;
background: #333;
margin: 5px auto 0;
}
JS 设置 indeterminate 是唯一可靠触发方式
:indeterminate 不是开关，只是状态匹配器。HTML 里写 indeterminate 属性、用 setAttribute()、甚至框架 v-model 绑定，全都没用。
- 必须用 JS 赋值 DOM property：
elem.indeterminate = true（注意不是字符串，也不是setAttribute） - 该操作不触发
change事件，也不影响checked值，两者正交独立 - 用户点击时，
indeterminate会自动变为false，然后checked正常翻转 - 树形组件中，每次子项变更后必须手动判断：
someChecked && !allChecked→parent.indeterminate = true，并同步设parent.setAttribute('aria-checked', 'mixed')
真正卡住人的地方从来不是怎么画那条横杠，而是忘记同步 aria-checked="mixed" —— 屏幕阅读器读不出“半选”，或者在父子联动时漏掉某次 indeterminate = false 的重置，导致状态滞留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
