input:indeterminate样式无效的根本原因是原生复选框的半选图形由系统控件绘制，background、border等属性对其无效；必须配合appearance: none清除默认外观，并用::before重绘图形，同时手动维护indeterminate状态与无障碍语义。
:indeterminate 伪类本身不触发半选，只匹配 JS 设置了 indeterminate = true 的原生 <input type="checkbox">；不加 appearance: none 就写样式，基本等于白写。
为什么 input:indeterminate 样式总没反应
不是选择器写错了，而是你在跟操作系统/浏览器私有渲染层硬刚：
- 原生复选框的半选图形（横杠或方块）由系统控件绘制，
background-color、border、color对它完全无效 -
input:indeterminate { background: red; }没加appearance: none→ 这行 CSS 实际没作用在可见区域上 - 框架（如 Element、Ant Design）封装了 DOM：
:indeterminate只匹配原生input元素，外层容器不会响应 - 选择器优先级不够：比如框架用了
.el-checkbox input，而你只写input:indeterminate，样式就被覆盖 -
indeterminate="true"写在 HTML 里无效 —— 浏览器忽略它，也不会触发伪类匹配
怎么让半选视觉真正可控（最小可行链）
四步缺一不可，否则样式只是摆设：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用 JS 设置状态：
checkbox.indeterminate = true（注意是 property 赋值，不是setAttribute） - 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')，否则屏幕阅读器读不出“半选”
accent-color 能不能直接换半选色？
不能依赖它控制半选态颜色：
-
accent-color在 Chrome/Safari 下对:indeterminate有效，但仅限未设appearance: none时；一旦清除了默认外观，它就失效 - Firefox 完全不支持
accent-color影响:indeterminate，必须靠::before或::after绘制 - 不同浏览器对伪元素渲染支持不一致：Chrome/Safari 较稳定；Firefox 有时需加
position: relative或调margin才能居中
父子联动时最容易漏掉的关键点
“父 checkbox 半选”是业务逻辑推导结果，不是浏览器自动计算的：
- 每次子项变更后，必须手动判断：
someChecked && !allChecked→ 设parent.indeterminate = true - 用户点击父 checkbox 时，
indeterminate会**自动变为false**，但checked按常规翻转（false→true），你要立刻同步子项状态 - 别监听
change事件来响应indeterminate变化——它不触发该事件；要用click+ 状态重算 - 如果用了自定义
label包裹（如<label><input type="checkbox" hidden></label>），样式要挂到label上，再用input:indeterminate + label或兄弟选择器联动
最常被忽略的是：伪元素在不同浏览器里的渲染差异，以及 indeterminate 属性被设为 true 后，用户点击时它会静默归零——这个行为没法阻止，只能立刻补上业务逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
