css accent-color 介绍

更新于 阅读 16

accent-color的作用

css的accent-color属性修改表单控件的颜色

目前支持的HTML元素如下:

  • 复选框:<input type="checkbox">
  • 单选框: <input type="radio">
  • 范围选择框:input type="range">
  • 进度条:<progress>

实际效果

具体什么意思看下面的示例:

改变颜色,表单内的组件颜色就会发生变化,可以动手在线动手试试css accent-color 在线例子

//file.vwood.xyz/2024/02/27/upload_iqhx5ghc595jq2dd63ycsaqo5ui8pbhb.png

同时会发现,当选择的颜色亮度比较亮时,复选框选中的颜色会变成黑色。accent-color的颜色亮度高的时候,系统会自动进行反色来增加对比度。

兼容性

目前主流的浏览器都支持该属性,可以在项目中直接使用。IE不支持?我们的项目不考虑IE。 //file.vwood.xyz/2024/02/27/upload_mh7dc2kv6l6aijobv2wo08kp14f7nxp2.png