CSS Property: accent-color

The accent-color property specifies the accent color for user interface controls such as input type="checkbox", input type="radio", input type="range", and progress.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>accent-color</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        input[type=checkbox] {
            accent-color: red;
        }
        input[type=radio] {
            accent-color: blue;
        }
        input[type=range] {
            accent-color: orange;
        }
        progress {
            accent-color: green;
        }
    </style>
</head>
<body>
<h3>Accent color for checkboxes.</h3>
<input id="check1" type="checkbox" name="fruit1" value="Banana"><label for="check1">Banana</label><br><br>
<input id="check2" type="checkbox" name="fruit2" value="Strawberry"><label for="check2">Strawberry</label>

<h3>Accent color for radio buttons.</h3>
<input id="radio1" type="radio" name="fruit1" value="Banana"><label for="radio1">Banana</label><br><br>
<input id="radio2" type="radio" name="fruit2" value="Strawberry"><label for="radio2">Strawberry</label>

<h3>Accent color for range input.</h3>
<label for="range"></label><input id="range" type="range" name="range" value="Range">

<h3>Accent color for progress element.</h3>
<label>10% </label><progress id="progress" value="10" max="100">10%</progress>
</body>
</html>

RESULT

auto	The browser selects the accent color.	See example
inherit	Inherits the property from the parent element.	See example
initial	Sets the property to its default value.	See example

Specifies the accent color for user interface controls.