一条 CSS 属性替你干掉 checkbox hack

🔑 核心要点

• 真正干活的属性：:root { accent-color: #6366f1; } 一行设置一次，根下每个复选框/单选框/滑块/进度条都染成靛蓝——无 appearance:none、无手绘对勾、无重建焦点环，因为你从未把原生控件拆开过
• 为什么 :root 就够：accent-color 是继承属性，像 color 流向每段文字一样流向文档里每个表单控件——浏览器保持平台原生画法（iOS 圆角、Windows 方角），只换强调色相：对勾、单选框圆点、滑块拇指与填充轨道、进度条的值填充
• 所有没写的状态都还在：:hover、:disabled、:indeterminate、键盘焦点、屏幕阅读器语义全部原样接线，因为仍是浏览器在做接线——你拿到的是一个仍像真控件的彩色控件
• 它到哪为止：accent-color 覆盖 checkbox/radio/range/progress，明确不覆盖 <meter>（那是 spec 行为非样式表 bug）；若你已走 appearance:none 自己画了全套，accent-color 就没什么可染的了——它不是进一步定制已重建控件的途径，而是让你一开始就别重建的理由
• 高对比模式的诚实说明是特性非局限：Windows forced-colors 允许系统连同大多数作者指定颜色一起覆写 accent-color，以保证用户配置的对比度成立——那是平台尽职、不是属性失职

💡 金句