表单控件默认颜色受浏览器和操作系统限制，部分状态和控件无法用普通CSS覆盖；需用appearance: none解封样式控制权，但会牺牲原生外观与可访问性；accent-color是复选框染色最简方案，但兼容性有限；100%控色只能靠ARIA模拟，代价高昂。
表单控件默认颜色是否受浏览器限制
能改，但有限制——不是所有控件、所有状态、所有浏览器都允许你用普通 CSS 覆盖默认颜色。核心限制来自两点：一是部分浏览器（尤其是 Safari 和旧版 Edge）对原生表单控件的样式封装较深；二是某些颜色属性（如 color、background-color）在未显式设置 appearance 时会被忽略。
appearance: none 是绕过限制的关键开关
不加 appearance: none，很多浏览器会直接无视你对 input[type="checkbox"] 或 select 的 background-color 设置。加了之后才能真正接管渲染逻辑，但代价是失去原生外观和部分可访问性语义（需手动补足）。
- Chrome / Firefox：加
appearance: none后基本可自由控制颜色，包括::before/::after伪元素定制复选框 - Safari：必须加
-webkit-appearance: none（且仅对部分控件生效），select仍可能保留原生下拉箭头颜色，无法用 CSS 改变其图标色 - 移动端 WebView（如 iOS WKWebView）：
appearance支持不稳定，input[type="date"]等控件几乎无法染色
哪些颜色属性实际有效？
不是所有颜色都能被覆盖。以下是在各浏览器中验证过的“相对可靠”写法：
input[type="text"],
input[type="email"],
textarea {
color: #333; /* 文本色：普遍支持 */
background-color: #f9f9f9; /* 背景色：加 appearance:none 后稳定 */
border-color: #ccc; /* 边框色：普遍支持 */
}
<p>input[type="checkbox"] {
accent-color: #007bff; /<em> 新标准：Chrome 93+、Firefox 92+、Safari 15.4+ 支持，替代 hack 方案 </em>/
}</p><p>select {
color: #333; /<em> 仅影响文字，不影响下拉箭头 </em>/
background-color: #fff; /<em> 需 appearance:none 才生效 </em>/
}注意：accent-color 是目前最干净的复选框/单选框染色方式，但 IE 完全不支持，Android Webview 也存在兼容问题。
立即学习“前端免费学习笔记（深入）”；
为什么有些颜色改不了？根源在操作系统层
浏览器对表单控件的渲染并非完全自绘——它常调用 OS 原生控件（如 Windows 的 Common Controls、macOS 的 AppKit）。这意味着：
-
input[type="range"]的轨道/滑块颜色，在 Safari 中无法用纯 CSS 修改轨道背景（::-webkit-slider-runnable-track可控，但 macOS 原生风格下仍受限） -
button的禁用态（:disabled）颜色，由系统主题决定，CSScolor可能被强制覆盖为灰阶 - 高对比度模式下，用户系统设置会重置几乎所有表单颜色，
forced-colors媒体查询也无法回退原样式
真要 100% 控制颜色，只剩一条路：用 div + ARIA 模拟全部控件，放弃原生语义换样式自由——但无障碍成本极高，不推荐轻率采用。
