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

FAQs

How can I change the color of checkboxes using CSS accent-color property?

To change the color of checkboxes using the CSS accent-color property, you need to target the checkbox input element and set its accent-color property.

Is it possible to change the color of checked checkboxes with accent-color property?

Yes, it is possible to change the color of both checked and unchecked checkboxes using the accent-color property. You can use CSS selectors such as :checked to target the checked checkboxes and set a different accent-color property value.

Are there any compatibility issues with using the accent-color property to change checkbox colors?

The accent-color property is not widely supported by all web browsers, and its usage may result in different outcomes depending on the browser being used. It is best to check for browser compatibility before using this property in your CSS to change checkbox colors. Additionally, older browsers may not support the accent-color property and alternative methods such as using CSS background-color or border-color properties may be necessary.