Css 简明教程

CSS - accent-color Property

CSS accent-color 属性决定可应用于无线按钮、复选框、按钮等用户界面控件的强调色。此属性提供了为用户界面控件分配用户所选颜色的灵活性。

CSS accent-color property determines the accent color that can be applied to user-interface controls such as radio button, checkboxes, buttons etc. This property gives the flexibility to assign color of user’s choice to the user-interface control.

Syntax

accent-color: auto | color | initial | inherit;

Value

Description

auto

The browser selects the accent color. Default value.

color

It specifies the color to be used. Different formats (rgb, hex, color-name, etc) can be used.

initial

This sets the property to its initial value

inherit

This inherits the property from the parent element

Examples of CSS Accent Color Property

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

Below examples will explain the accent-color property with different values.

Setting Default Color

为允许浏览器给用户界面控件赋予颜色，可以使用 auto 值。此情况在以下示例中有所体现。

To allow the browser to give the color to the user-interface controls, the auto value can be used. This is shown in the example below.

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 值和颜色十六进制值。

To apply color of our choice to the user-interface controls, we can specify the color in different formats. This is shown in the example below. Three different formats have been used - color name, color rgb value and color hexadecimal value.

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>

Supported Browsers