Table of Contents

CSS – accent-color Property

”;

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

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

Setting Default Color

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

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>