accent-color
Baseline 2022
Newly available
Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
尝试一下
支持 accent-color
属性的浏览器目前将其应用于下列 HTML 元素:
语法
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;
取值
形式定义
形式语法
示例
设置自定义强调色
HTML
html
<input type="checkbox" checked />
<input type="checkbox" class="custom" 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 |
浏览器兼容性
BCD tables only load in the browser
参见
background-color
、border-color
、caret-color
、color
、column-rule-color
、outline-color
、text-decoration-color
、text-emphasis-color
、text-shadow
——其他颜色相关属性<color>
——相关数据类型<input>
——相关 HTML 元素- 使用 CSS 为 HTML 元素应用颜色