CSS accent-color 强调色
CSS accent-color属性：改变表单控件强调色（复选框/单选按钮/滑块/进度条）、auto和自定义颜色、与color-scheme配合、浏览器兼容性 · 难度：入门 · +10XP
CSS accent-color —— 统一表单控件主题色
复选框的蓝色勾、单选按钮的蓝色圆点、进度条的蓝色填充……这些都是浏览器默认的"强调色"。accent-color让你统一设置。
一行代码统一
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
accent-color: #4CAF50; /* 全部变绿色 */
}支持的控件
| 控件 | 受影响的部分 |
|---|---|
| checkbox | 勾选框颜色 |
| radio | 单选圆点颜色 |
| range | 滑块轨道颜色 |
| progress | 进度条填充颜色 |
动手练习
- 基础练习：把网站所有表单控件的强调色改为品牌色。
- 进阶应用：配合color-scheme在暗黑模式下使用不同的accent-color。
- 项目实战：统一全站表单控件颜色，提升品牌一致性。