Home » CSS » How to Change Checkbox Color in CSS?

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>

        input[type=checkbox] {
          accent-color: red;


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




The accent-color Property Example

Change checkbox checked background color:

Browser Support

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