How to Change Checkbox Color in CSS?

Use the accent-color property to change the checkbox color in CSS.

What is accent-color?

The accent-color is the CSS property used to change the color for the user-interface controls such as checkbox (<input type="checkbox">), radio button (<input type="checkbox">) and range (<input type="range">) etc. The following is the syntax of this property:

CSS accent-color Property Syntax

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

Example to Change Checkbox Color Using CSS accent-color Property

<!DOCTYPE html>
<html>

<head>
    <style>
        input[type=checkbox] {
          accent-color: red;
        }
    </style>
</head>

<body>

    <h2>The accent-color Property Example</h2>

    <h3>Change checkbox checked background color:</h3>
    <input type="checkbox" id="fruit1" name="fruit1" value="Mango" checked>
    <label for="vehicle1"> Mango</label><br>
    <input type="checkbox" id="fruit2" name="fruit1" value="Apple" checked>
    <label for="vehicle2"> Apple</label><br><br>

</body>

</html>

Output

The accent-color Property Example

Change checkbox checked background color:

Mango
Apple

Browser Support

Browser version that fully supports the CSS accent-color property.

Property	Chrome	Edge	Firefox	Safari	Opera
accent-color	93.0	93.0	92.0	15.4	79.0