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