UD5工具箱
什么是 CSS accent-color 属性？
accent-color 是 CSS 中的一个属性，用于统一设置表单控件（如复选框、单选按钮、范围滑块、进度条等）的强调色或主题色。只需一行代码，即可改变所有支持的控件颜色，无需为每个控件单独编写复杂的伪元素样式。它接受任何有效的 CSS 颜色值，包括 hex、rgb、hsl 和颜色名称。
accent-color 支持哪些 HTML 元素？
目前 accent-color 主要支持四种表单元素：input type checkbox 复选框、input type radio 单选按钮、input type range 范围滑块以及 progress 进度条。部分浏览器也对 meter 元素提供支持。随着浏览器更新，支持范围可能进一步扩大。
accent-color 的浏览器兼容性如何？
accent-color 在现代浏览器中得到了广泛支持：Chrome 93+、Edge 93+、Firefox 92+、Safari 15.4+、Opera 79+。截至2024年，全球超过95%的用户浏览器已支持该属性。对于不支持的老旧浏览器，控件将回退到系统默认颜色，不会影响功能可用性（优雅降级）。
如何在项目中正确使用 accent-color？
最佳实践是在 :root 中全局设置，确保整个网站的表单控件风格统一：:root accent-color 3B82F6。也可以针对特定控件或特定区域设置不同的强调色。结合 media prefers-color-scheme dark 可为暗色模式提供不同的 accent-color，提升可访问性和视觉协调性。
accent-color 对可访问性有什么影响？
合理设置 accent-color 可提升可访问性。建议选择与背景对比度至少达到 3:1（WCAG AA 标准）的颜色。在亮色背景下避免使用过浅的颜色（如淡黄、浅粉），在暗色背景下避免过暗的颜色。如果 accent-color 颜色对比度不足，浏览器可能会自动调整控件边框或添加额外视觉提示。
accent-color 与 color-scheme 有什么关系？
color-scheme 属性告诉浏览器页面支持的颜色方案（light 或 dark），影响浏览器原生控件的基础色调。accent-color 则在这些基础上进一步自定义强调色。两者配合使用效果最佳，建议在全局设置中同时定义 color-scheme 和 accent-color，并为暗色模式提供不同的强调色。
accent-color 是否支持 CSS 过渡动画？
从技术上讲，accent-color 是一个离散属性，浏览器对其过渡支持有限。但 Chromium 内核浏览器在某些版本中开始支持 accent-color 的颜色过渡。可以使用 transition accent-color 0.3s ease 尝试启用平滑过渡，在不支持的浏览器中颜色会直接切换，不影响功能。
如何用 JavaScript 动态修改 accent-color？
使用 JavaScript 可以动态修改 accent-color，例如响应用户操作或主题切换。方法包括：修改 CSS 变量 document.documentElement.style.setProperty、直接修改 style 属性 document.documentElement.style.accentColor、或动态注入 CSS 规则。
accent-color 和自定义控件样式有什么区别？
accent-color 是一种轻量级方案，直接修改原生控件的强调色，代码简洁（一行CSS），维护成本低。而使用 appearance none 完全自定义控件样式虽然灵活度更高，但需要编写大量伪元素样式，且需处理各浏览器差异。accent-color 适合追求简洁、统一品牌色调的场景。
有哪些流行的 accent-color 配色推荐？
常用配色参考：品牌蓝 3B82F6（企业级应用）、成功绿 10B981（电商支付）、警示红 EF4444（警告操作）、温暖橙 F97316（创意社交）、优雅紫 8B5CF6（设计工具）。暗色模式推荐 818cf8（柔和紫蓝）或 bb86fc（Material Design 暗色强调色）。