如何利用CSS :indeterminate处理三态复选框的视觉逻辑？

input:indeterminate 伪类仅匹配 JS 显式设置 indeterminate = true 的原生 checkbox，需配合 appearance: none、伪元素绘制、aria-checked="mixed" 才能实现可控半选视觉与无障碍支持。

:indeterminate 伪类本身不产生半选状态，只匹配 JS 显式设置 indeterminate = true 的原生 <input type="checkbox">；不加 appearance: none 就写样式，基本等于白写。

为什么 input:indeterminate 样式总没反应

不是选择器写错了，而是你在跟操作系统渲染层硬刚：

• 原生 <input type="checkbox"> 的半选图形（横杠/方块）由系统或浏览器私有逻辑绘制，background-color、border、color 对它完全无效
• 没加 appearance: none 就写 input:indeterminate { background: red; }——这行代码根本没作用在可见区域上
• 框架（如 Element、Ant Design）封装后的 checkbox 是自定义 DOM 结构，:indeterminate 只作用于原生 input 元素，外层容器不会自动响应
• 选择器优先级不够：比如框架写了 .el-checkbox input，而你只写 input:indeterminate，样式就被覆盖了

怎么让半选视觉真正可控（最小可行链）

必须走通这四步，缺一不可：

• 用 JS 设置 elem.indeterminate = true（注意：不能用 setAttribute('indeterminate', 'true')，那是 attribute，不是 property）
• CSS 中先清除默认外观：input[type="checkbox"] { appearance: none; }
• 用伪元素绘制图形，例如短横线：input:indeterminate::before { content: ""; display: block; width: 8px; height: 2px; background: #333; margin: 7px auto 0; }
• 同步补充无障碍语义：elem.setAttribute('aria-checked', 'mixed')，否则屏幕阅读器读不出“半选”

:indeterminate 和 :checked 能不能一起用？

不能同时为真——:indeterminate 和 :checked 是互斥状态：

立即学习“前端免费学习笔记（深入）”；

• checkbox.indeterminate = true 时，checkbox.checked 仍为 false（或 true），两者独立
• 用户点击该控件后，indeterminate 自动变为 false，checked 按常规逻辑翻转
• CSS 中可分别定义：input:checked::before 绘勾，input:indeterminate::before 绘横线，但不要写成 input:checked:indeterminate（语法无效）
• 父子联动时，每次子项变更后必须手动判断：someChecked && !allChecked → 设 parent.indeterminate = true

不同浏览器下要注意的细节

accent-color 在 Chrome / Safari 下对 :indeterminate 无效，别指望它改半选色：

• accent-color 只影响 :checked 态的勾选颜色，对 :indeterminate 完全不起作用
• Firefox 不支持 accent-color 控制 :indeterminate，必须靠 ::before 或 ::after 自定义
• 如果用了自定义 <label> 包裹（如 <label><input type="checkbox" hidden></label>），样式要挂到 label 上，再用 input:indeterminate + label 或兄弟选择器联动
• 别监听 change 事件来响应 indeterminate 变化——它不触发该事件；要用 click + 状态重算

最常被忽略的点是：半选状态不是浏览器自动推导的，而是业务逻辑计算结果；indeterminate = true 后，aria-checked="mixed" 必须同步设置，否则可访问性直接失效。