Use the accent-color property to change the checkbox color in CSS.
Checkboxes are a common element in web forms and user interfaces, allowing users to select or deselect options with a simple click. While checkboxes come with default styles provided by browsers, you may sometimes want to customize their appearance to match your website's design or create a more engaging user experience. If you're wondering how to change the checkbox color using CSS, this guide is here to help.
What is accent-color?
The accent-color is the CSS property used to change the color for the user-interface controls such as the 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>This HTML code demonstrates the use of the "accent-color" property in CSS to change the color of checkboxes.
In the CSS section, the code sets the "accent-color" property for input elements of type "checkbox" to red. This means that any checkbox on the webpage will have its accent color set to red.
In the HTML section, there are two checkboxes with labels for "Mango" and "Apple". Both checkboxes have the "checked" attribute, indicating that they are initially selected.
When the webpage is rendered in a browser, the checkboxes will appear with a red accent color due to the CSS style applied. The text labels "Mango" and "Apple" will be displayed alongside their respective checkboxes.
This code serves as a simple example of how to change the color of checkboxes using CSS and demonstrates the usage of the "accent-color" property to achieve this effect.
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 - Change Checkbox Color
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.
More posts related to Checkbox and Color:
Thank you for saving my hours.. <3
thanks a lot