Css 简明教程
CSS - accent-color Property
CSS accent-color 属性决定可应用于无线按钮、复选框、按钮等用户界面控件的强调色。此属性提供了为用户界面控件分配用户所选颜色的灵活性。
Syntax
accent-color: auto | color | initial | inherit;
Value |
Description |
auto |
浏览器会选择强调色。默认值。 |
color |
指定要使用的颜色。可以使用不同的格式(rgb、hex、颜色名称等)。 |
initial |
这会将属性设置为其初始值 |
inherit |
这会从父元素继承属性 |
Setting Default Color
为允许浏览器给用户界面控件赋予颜色,可以使用 auto 值。此情况在以下示例中有所体现。
Example
<!DOCTYPE html>
<html>
<head>
<style>
input {
accent-color: auto;
}
</style>
</head>
<body>
<h2>CSS accent-color property</h2>
<div>
<input type="checkbox" id="check" checked>
<label for="check">accent-color: auto</label>
</div>
<div>
<input type="radio" id="clicked" checked>
<label for="clicked">accent-color:auto</label>
</div>
<div>
<input type="range" id="pull">
<label for="pull">accent-color:auto</label>
</div>
</body>
</html>
Customizing Color
为将我们所选的颜色应用于用户界面控件,我们可以在不同的格式中指定颜色。此情况在以下示例中有所体现。已使用了三种不同的格式 - 颜色名称、颜色 rgb 值和颜色十六进制值。
Example
<!DOCTYPE html>
<html>
<head>
<style>
input[type=radio] {
accent-color: #ffa500;
}
input[type=range] {
accent-color: rgb(55, 255, 0);
}
progress {
accent-color: red;
}
</style>
</head>
<body>
<h2>CSS accent-color property</h2>
<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>