css如何使用accent-color

更新日期: 2024-02-28阅读: 415标签: 属性分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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 可能不适用于所有输入元素，因此始终建议在实际环境中测试其功能。

链接: https://www.fly63.com/article/detial/12666