accent-color 对 checkbox 和 radio 生效，但仅作用于选中态的强调区（✓标记、背景、圆点填充），不控制边框/大小/未选中态；需直接设在 input 元素上，避免 appearance: none 或 transparent 值，并注意 indeterminate 状态下强制灰色且不可 CSS 覆盖。
accent-color 对 checkbox 和 radio 真的生效吗
能，但只改「强调区」：checkbox 的勾选标记（✓）和选中背景、radio 的内部圆点填充色。它不改边框、大小、圆角或未选中状态外观——这些仍得靠其他 CSS 控制。
常见误判是看到颜色没变就以为属性失效，其实大概率是写了 appearance: none 或用了 transparent/currentcolor 值，这两个直接让浏览器丢弃原生渲染路径，accent-color 就失去作用对象。
- 必须直接设在
input[type="checkbox"]或input[type="radio"]上，写在label或form里不生效 - Chrome 会静默忽略
transparent；Firefox 控制台报 warning，但不崩溃 - 深色模式下若没加
，Safari/Chrome 可能强制回退到系统默认色
怎么批量统一 checkbox 和 radio 的 accent-color
最稳方式是绑定 CSS 变量，在 :root 声明，靠继承透传：
:root {
--form-accent: #3b82f6;
accent-color: var(--form-accent);
}
这样所有子树里的 input[type="checkbox"] 和 input[type="radio"] 都自动染色。注意：accent-color 本身可继承，但只对支持它的元素生效——select、textarea 加了也白加。
- 别用
body { accent-color: ... }，body不是根作用域，某些场景下继承链断裂 - 如果只想局部覆盖（比如弹窗内用红色），直接写
.modal input[type="checkbox"] { accent-color: #ef4444; }，更可控 - 变量 fallback 写成
var(--form-accent, #007bff)仅在变量未定义时触发，不是“兜底生效”，所以定义要到位
为什么 checkbox 有时还是灰色？indeterminate 状态是硬伤
当 input[type="checkbox"].indeterminate = true（JS 设置），无论 accent-color 设什么值，勾选标记都强制显示为灰色——这是当前规范明确规定的，不是 bug，也不是浏览器兼容问题。
- 这个状态无法用纯 CSS 覆盖，必须用 JS 手动控制视觉表现（比如加伪元素遮罩或替换 DOM）
-
input[type="radio"]没有 indeterminate 状态，所以不受影响 - 部分旧版 Safari 在 indeterminate 下可能完全不渲染勾选标记，建议加降级样式（如
input:indeterminate + label::before）
accent-color 和 ::marker / ::before 冲突时谁赢
accent-color 是更高层的主题入口，但会被显式伪元素规则覆盖。例如：
input[type="checkbox"]::marker {
color: red;
}
这条会直接压过 accent-color；而 input[type="checkbox"]::before 是自定义方案，和 accent-color 完全无关——一旦用了 ::before，通常意味着你已用 appearance: none 剥离原生结构，accent-color 此时已退出游戏。
- 想保留原生交互+微调颜色，就只用
accent-color，别碰::marker - 想彻底重绘 UI，就放弃
accent-color，走 appearance + 伪元素 + JS 状态管理路线 - 别混用：既设
accent-color又写input[type="checkbox"]::marker，容易在不同浏览器里行为不一致
真正容易被忽略的是：indeterminate 状态下 accent-color 完全失效，且没有 CSS 规避方案；还有，只要用了 appearance: none，不管后面怎么补 accent-color，它都只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
