此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
accent-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
尝试一下
accent-color: red;accent-color: #74992e;accent-color: rgb(255 255 128);accent-color: hsl(250 100% 34%);<section> <div> <input checked="" type="checkbox" /> <label for="example-element">示例标签</label> </div></section>.container > div { display: flex; align-items: center;}#example-element { width: 40px; height: 40px;}#example-label { margin-left: 10px; font-size: x-large;}当前支持accent-color 的浏览器，会将其应用于以下 HTML 元素：
每个用户代理（浏览器）都有其默认的强调色，并会根据可读性和对比度进行适当调整。这种强调色并不会被所有用户界面控件或控件的所有状态使用。accent-color 仅适用于那些在特定状态下会使用强调色的用户界面控件。
语法
css
/* 关键字值 */accent-color: auto;/* <color> 值 */accent-color: darkred;accent-color: #5729e9;accent-color: rgb(0 200 0);accent-color: hsl(228 4% 24%);/* 全局值 */accent-color: inherit;accent-color: initial;accent-color: revert;accent-color: revert-layer;accent-color: unset;值
形式定义
形式语法
accent-color =
auto|
<color>
示例
设置自定义强调色
HTML
html
<input type="checkbox" checked /><input type="checkbox" checked />CSS
css
input { accent-color: auto; display: block; width: 30px; height: 30px;}input.custom { accent-color: rebeccapurple;}结果
规范
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |
浏览器兼容性
参见
background-color、border-color、caret-color、color、column-rule-color、outline-color、text-decoration-color、text-emphasis-color、text-shadow：其他与颜色相关的属性<color>：相关数据类型<input>：相关 HTML 元素