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.
| Property | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| accent-color | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 |
