CSS3 词条目录
前端Wiki/词条/accent-color 表单强调色

accent-color 表单强调色

定义一行 CSS 给表单控件(复选框、单选、滑块、进度条)染上品牌色

系统原生控件的主题色由操作系统决定,以前想换复选框勾选色只能完全自绘控件。accent-color: #4a9eff 一行写下去,勾选框、单选圆点、range 滑块、progress 条全部跟着变,且保留了原生无障碍与键盘交互。

它只改「强调色」,控件其他部分仍跟系统;想要完全统一的外观还是得自绘。表单批量统一样式的场景非常省事。

HTML
<style>
  form { accent-color: #4a9eff; }
</style>
<form>
  <input type="checkbox" checked> 勾选框<br><br>
  <input type="radio" name="r" checked> 单选<br><br>
  <input type="range" value="60"><br><br>
  <progress value="70" max="100"></progress>
</form>
⚠ 常见误区
🔗 相关词条表单与输入控件颜色与透明度
← 返回来源章节表单验证与提示属性