accent-color 仅控制原生表单控件内部强调区（如 checkbox 的勾选标记、range 的已填充轨道）的填充色，不影响盒模型；它不作用于 border、background 或非强调区元素，且在 appearance: none 时失效。
accent-color 不影响盒模型（padding、border、margin、width、height），它只控制控件内部“强调区域”的填充色。想改边框、背景或尺寸，得用 border、background、width 等传统属性——accent-color 和盒模型完全无关。
为什么 accent-color 不能改 border 或 background？
accent-color 是语义化属性，不是视觉绘制指令。它的作用对象是浏览器渲染层中预定义的「强调区」：比如 checkbox 的勾选标记、range 的已填充轨道。这些区域本身不对应标准盒模型盒子，也不响应 border 或 padding。
- 给
input[type="checkbox"]设border: 2px solid red→ 有效，改的是外框 - 给同一元素设
accent-color: red→ 改的是 ✓ 标记和选中背景，不是边框 - 两者可共存，但职责分离：一个管结构，一个管交互高亮
哪些表单控件真正受 accent-color 影响？
仅四类原生控件的强调区响应 accent-color：
-
input[type="checkbox"]：勾选标记（✓）和选中时的背景色 -
input[type="radio"]：圆点标记 -
input[type="range"]：已填充轨道部分（不包括::thumb） -
progress：已完成进度条部分（不包括未完成轨道）
以下写上也无效：input[type="text"]、textarea、select、button——它们的视觉完全由盒模型 + 背景 + 边框控制。
appearance: none 一开，accent-color 就失效
这是最常踩的坑：一旦设了 appearance: none，浏览器就放弃原生渲染路径，accent-color 失去作用目标。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
input[type="range"] { accent-color: #3b82f6; height: 6px; border-radius: 3px; } - 危险写法：
input[type="range"] { appearance: none; accent-color: #3b82f6; }→ 颜色完全不出现 - 若需深度定制（如自定义 thumb），必须用
::webkit-slider-thumb或::thumb单独设background-color
深色模式下 accent-color 不自动切换
accent-color 本身不读取 prefers-color-scheme，它只是静态颜色值。要适配深色模式，必须手动绑定 CSS 变量：
:root {
--form-accent: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--form-accent: #60a5fa;
}
}
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
accent-color: var(--form-accent);
}
注意：var(--form-accent) 未定义时整条声明会被忽略，不是回退到默认色；accent-color: var(--form-accent, #007bff) 才带 fallback。
appearance: none）、或试图让它染非强调区（比如 text 输入框的边框），它就彻底退出游戏——这时候就得切回盒模型+伪元素的老路。 
