当前位置：首页 > article >正文

CSS中的accent-color如何使用

article 2025/1/18 0:29:19

前言

accent-color是CSS 2022年推出的一个新属性，它能修改input默认控件的颜色，支持的input控件元素包括复选框（<input type="checkbox">）、单选框（<input type="radio">）、范围选择框（<input type="range">）和进度条（<progress>）。在黑暗模式下，该属性也能适配。

此外，accent-color属性是可继承的，可以在根级别设置，也可以在单个元素上设置。例如：

在根级别设置：:root { accent-color: lime; }
在单个元素上设置：form { accent-color: lime; } 或 input[type="checkbox"] { accent-color: hotpink; }

目前，accent-color在Chrome、Edge、Firefox和Safari技术预览版中已经得到了支持。

示例 1：全局设置 accent-color

在这个示例中，我们在文档的根元素上设置了 accent-color，这将影响页面上所有的相关输入元素。

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    :root {  
      accent-color: blue; /* 设置全局的 accent-color 为蓝色 */  
    }  
</style>  
</head>  
<body>  
  <input type="checkbox" id="checkbox1">  
  <label for="checkbox1">Checkbox 1</label><br>  
  <input type="radio" id="radio1" name="radioGroup">  
  <label for="radio1">Radio 1</label><br>  
  <input type="range" min="0" max="100" value="50"><br>  
  <progress value="22" max="100"></progress>  
</body>  
</html>

示例 2：特定元素设置 accent-color

在这个示例中，我们只为复选框设置了 accent-color。

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    input[type="checkbox"] {  
      accent-color: green; /* 仅设置复选框的 accent-color 为绿色 */  
    }  
</style>  
</head>  
<body>  
  <input type="checkbox" id="checkbox2">  
  <label for="checkbox2">Checkbox 2 (green accent)</label><br>  
  <input type="radio" id="radio2" name="radioGroup">  
  <label for="radio2">Radio 2 (default accent)</label><br>  
  <input type="range" min="0" max="100" value="50"><br>  
  <progress value="22" max="100"></progress>  
</body>  
</html>

示例 3：使用 CSS 变量设置 accent-color

你还可以使用 CSS 变量（也称为自定义属性）来设置 accent-color，这样可以更容易地在整个网站中更改颜色。

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    :root {  
      --accent-color: purple; /* 定义 CSS 变量 */  
    }  
    input[type="checkbox"],  input[type="radio"],  input[type="range"],  progress {  
      accent-color: var(--accent-color); /* 使用 CSS 变量设置 accent-color */  
    }  
</style>  
</head>  
<body>  
  <input type="checkbox" id="checkbox3">  
  <label for="checkbox3">Checkbox 3 (purple accent)</label><br>  
  <input type="radio" id="radio3" name="radioGroup">  
  <label for="radio3">Radio 3 (purple accent)</label><br>  
  <input type="range" min="0" max="100" value="50"><br>  
  <progress value="22" max="100"></progress>  
</body>  
</html>

请注意，accent-color 的支持情况可能会因浏览器而异，因此在实际使用之前，最好检查你的目标浏览器是否支持该属性。

此外，accent-color 可能不适用于所有输入元素，因此始终建议在实际环境中测试其功能。

关于优联前端

武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育，医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。承接Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。