• Post author:
  • Post category:CSS
  • Reading time:3 mins read
Change checkbox color in CSS.
Demonstrating checkbox checked red background color using 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:




Browser Support

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

PropertyChromeEdgeFirefoxSafariOpera
accent-color93.093.092.015.479.0

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.