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 |