笙亿网络策划

CSS accent-color 属性怎么用？

约 5 分钟读完 36 阅
文章导读
上一个 测验 下一个 CSS accent-color 属性决定了可以应用于用户界面控件（如 radio button、checkboxes、buttons 等）的强调色。该属性提供了灵活性，允许为用户界面控件指定用户选择的颜色。
📋 目录
  1. 一 语法
  2. 二 CSS accent-color 属性的示例
  3. 三 设置默认颜色
  4. 四 自定义颜色
  5. 五 支持的浏览器
A A

CSS - accent-color 属性

上一个
测验
下一个

CSS accent-color 属性决定了可以应用于用户界面控件（如 radio button、checkboxes、buttons 等）的强调色。该属性提供了灵活性，允许为用户界面控件指定用户选择的颜色。

语法

accent-color: auto | color | initial | inherit;
值 描述
auto 浏览器选择强调色。默认值。
color 指定要使用的颜色。可以采用不同的格式（rgb、hex、color-name 等）。
initial 将属性设置为其初始值
inherit 从父元素继承该属性

CSS accent-color 属性的示例

下面的示例将通过不同的值来解释 accent-color 属性。

设置默认颜色

要让浏览器为用户界面控件提供颜色，可以使用 auto 值。下例展示了这一点。

示例

<!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>

自定义颜色

要为用户界面控件应用我们选择的颜色，可以以不同格式指定颜色。下例展示了这一点。使用了三种不同的格式 - 颜色名称、颜色 rgb 值和颜色十六进制值。

示例

<!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>

支持的浏览器

元素 Chrome Edge Firefox Safari Opera
accent-color 93.0 93.0 92.0 15.4 79.0
css_reference.htm