:indeterminate伪类仅匹配js设置indeterminate=true的原生复选框，必须配合appearance:none及::before/::after重绘才能生效，否则样式无效；还需同步设置aria-checked="mixed"保障无障碍。
:indeterminate 伪类本身不“触发”半选，只匹配 JS 设置了 indeterminate = true 的原生 <input type="checkbox">；不加 appearance: none 就写样式，基本等于白写。
为什么 input:indeterminate 样式总没反应
不是选择器写错了，而是你在跟操作系统渲染层硬刚：
- 原生复选框的半选图形（横杠/方块）由系统或浏览器私有逻辑绘制，
background-color、border、color对它完全无效 - 写了
input:indeterminate { background: red; }却没加appearance: none→ 这行 CSS 没作用在可见区域上 - 用了 UI 框架（如 Element、Ant Design）？它们的 checkbox 是封装 DOM，
:indeterminate只认原生<input>，外层容器不会响应 - 选择器优先级不够：框架可能写了
.el-checkbox input，而你只写input:indeterminate，样式被覆盖
必须用 JS 设置 indeterminate = true，不能靠 HTML 属性
indeterminate 是只读 property，不是可序列化的 HTML attribute：
-
<input type="checkbox" indeterminate>或<input type="checkbox" indeterminate="true">—— 全部无效，浏览器直接忽略 - 必须用 JS：
elem.indeterminate = true（注意：不是setAttribute('indeterminate', 'true')） - 设置后
elem.checked仍为false（或true），两者互不影响 - 用户点击时，
indeterminate自动变回false，checked按常规翻转
怎么让半选视觉真正可控（最小可行链）
四步缺一不可，漏一步就看不到效果：
- JS 设置：
checkbox.indeterminate = true - 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')，否则屏幕阅读器读不出“半选”
容易被忽略的兼容性细节
不同浏览器对伪元素支持不一致，别只测 Chrome：
- Firefox 支持
::before/::after绘制，但需确保display为block或inline-block - Safari 15.4+ 才稳定支持
appearance: none+:indeterminate组合，旧版会 fallback 到原生样式 - 不要依赖
accent-color控制半选色——它只影响:checked，对:indeterminate无效 - 如果父容器用了
transform或will-change，某些 Safari 版本下::before可能错位，建议加transform: translateZ(0)强制硬件加速
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
