# input[type=checkbox]与input[type=radio]颜色设置 - accent-color

> Web前端开发中相信很多人面对表单元素都会将其原始样式重置或借助非表单元素来模拟表单控件，之所以这般操作，是因为表单控件显示取决于设备、操作系统和浏览器。为了达到UI风格的统一，不得已而为之。

Author: DeathGhost
Published: 2021-10-15 22:16:11
Category: css
Canonical: https://www.deathghost.cn/article/css/103
Keywords: accent-color, input, radio, checkbox, 控件, 表单控件, 元素, 颜色, 设置, 高亮

Web前端开发中表单控件是必不可少的一部分，很多人也知道它因“环境”(设备、操作系统与浏览器)变化而变化。下面了解下关于单选（input[type=radio]）与复选(input[type=checkbox])表单控件颜色设置 - accent-color。

![input[type=checkbox]与input[type=radio]颜色设置 - accent-color](https://www.deathghost.cn/public/upload/article/2021/10/16/1634350443063929.jpg)

input[type=checkbox]与input[type=radio]颜色设置 - accent-color

## accent-color 语法

accent-color: auto/color;
// auto : 根据"环境"自动匹配
// color : 定义颜色

### accent-color 默认示例

<input type="checkbox" checked id="cb"/>
<label for="cb">示例复选</label>
 默认示例复选

如：设置accent-color颜色为红色

<input type="checkbox" checked id="cb"/>
<label for="cb">示例复选 - 设为红色</label>
#cb{
  accent-color: red;
}

## 在线示例效果

  See the Pen [accent-color](https://codepen.io/deathghost/pen/dyzGoJR) by 孙志锋 ([@deathghost](https://codepen.io/deathghost))
  on [CodePen](https://codepen.io).

新的属性，因此，浏览器需要最新版本方可显示其效果。

## accent-color 兼容

![accent-color 各浏览器兼容性](https://www.deathghost.cn/public/upload/article/2021/10/16/163434411986319.jpg)

accent-color 各浏览器兼容性

## accent-color 应用场景

表单内容中多组单选项或复选项中，着重（强调）突显某一选项组。

实际应用可能不是很大，但也是个新属性，新技巧，说不定哪天会用到；有用没用，只要知道还有这么个设置即可！

## Related

- Previous: [CSS自定义属性 - 变量的声明与读取](https://www.deathghost.cn/article/css/102)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)