必须清默认样式再重绘：先设appearance: none，再用::before伪元素画横杠，并同步设置aria-checked="mixed"确保可访问性。
直接写 input:indeterminate 样式基本没用——你是在跟浏览器原生控件硬刚，必须先清掉默认渲染层，再自己画。
为什么 input:indeterminate 写了却没反应
不是选择器错了，是它根本没作用在可见区域上。原生 <input type="checkbox"> 的半选图形（横杠、方块）由操作系统或浏览器私有 UA 样式绘制，background-color、border、color 这些属性对它完全无效。
- 写了
input:indeterminate { background: red; }却没加appearance: none→ 白写 - 用了 Element Plus / Ant Design 等框架 → 它们的
.el-checkbox input选择器权重更高，你的input:indeterminate被覆盖 - HTML 里写
<input indeterminate>→ 浏览器忽略，不触发伪类匹配
必须走通的四步最小链
缺一不可，否则半选只是“看起来像”，实际不可控、不可访问、不跨浏览器。
-
JS 设置状态：
cb.indeterminate = true（注意是 property 赋值，不是setAttribute('indeterminate', 'true')） -
CSS 清除默认：
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } -
伪元素重绘：
input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; } -
同步无障碍语义：
cb.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”
accent-color 对 :indeterminate 无效，别白费劲
accent-color 只影响 :checked 态的勾选色，在 Chrome/Safari 中对 :indeterminate 完全不起作用；Firefox 更是压根不支持。一旦用了 appearance: none，accent-color 就彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 想改半选颜色？只能靠伪元素手动设
background或color - Safari 15.4+ 支持
::-webkit-checkbox，但旧版 Safari 建议用label::after+ 绝对定位模拟 - 不要在父子联动逻辑里依赖
accent-color实现视觉反馈，它不参与状态判断
父子联动时 indeterminate 必须手动计算和重置
浏览器不会根据子项 checked 状态自动推导父项 indeterminate。这是纯业务逻辑，得你来算。
- 监听所有子项
change事件，统计checked数量：若someChecked && !allChecked→parent.indeterminate = true，同时parent.checked = false - 父项被点击时：
indeterminate === true表示“从半选转全选”，此时要设parent.checked = true并批量更新子项 - 避免事件循环：批量更新子项时，临时屏蔽子项的
change监听，或用dispatchEvent模拟点击而不触发回调
最常被跳过的其实是 aria-checked="mixed" 和 -moz-appearance: none —— 前者让残障用户感知不到状态，后者让 Firefox 下样式直接失效。别省这两行。
