CSS - accent-color 属性

CSS accent-color 属性确定应用于由某些元素创建的用户界面控件的主题色。

此属性允许浏览器自动调整某些元素（如表单输入、按钮等）以使用指定的颜色作为强调色，通常用于用户界面元素，浏览器可以在其中调整颜色以匹配主题或用户首选项。

以下 HTML 元素目前在支持 accent-color 属性的浏览器中受到 accent-color 属性的影响：

分配给每个用户代理的主题色各不相同，以确保可读性和对比度。此颜色仅应用于其适用状态中的特定用户界面控件。

可能的值

auto - 表示 UA 选择的颜色，该颜色应与平台的主题色匹配。
<color> - 定义将用作 accent-color 的颜色。

适用于

所有元素。

语法

Keyword值


accent-color: auto;

<color> 值


accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

CSS accent-color - 自动值

以下示例演示了 accent-color： auto 属性自动应用适当的强调色 -


<html>
<head>
<style>	
	 	input {
	 	 	 accent-color: auto;
	 	}
</style>
</head>
<body>
	 	<input type="checkbox" id="check" checked>
	 	<label for="check">accent-color: auto</label>
</body>
</html>

CSS accent-color - <color> 值

以下示例演示如何使用 accent-color 属性为复选框设置不同的主题色。第一个复选框是红色的，第二个是黄色的 -


<html>
<head>
<style>	
	 	#check1 {
	 	 	 accent-color: red;
	 	}
	 	#check2 {
	 	 	 accent-color: yellow;
	 	}
</style>
</head>
<body>
	 	<input type="checkbox" id="check1" checked>
	 	<label for="check1">Red</label></br>
	 	<input type="checkbox" id="check2" checked>
	 	<label for="check2">Yellow</label>
</body>
</html>

具有不同 HTML 元素的 CSS accent-color

以下示例演示了如何对不同的 HTML 元素使用 accent-color 属性-


<html>
<head>
<style>	
	 	input[type=radio] {
	 	 	 accent-color: red;
	 	}
	 	input[type=range] {
	 	 	 accent-color: rgb(55, 255, 0);
	 	}
	 	progress {
	 	 	 accent-color: violet;
	 	}
</style>
</head>
<body>
	 	<h3>accent-color for radio buttons</h3>
	 	<input type="radio" id="radio1" name="gender" checked>
	 	<label for="radio1">Male</label></br>
	 	<input type="radio" id="radio2" name="gender">
	 	<label for="radio2">Female</label>

	 	<h3>accent-color for a range</h3>
	 	<label for="ran">Range</label></br>
	 	<input type="range" id="ran" name="range_val" min="0" max="5">

	 	<h3>accent-color for a progress</h3>
	 	<label for="prog">Progress</label></br>
	 	<progress id="prog" name="prog_val"value="60" max="100">60%</progress>
</body>
</html>

打印本页