CSS accent-color Property
The accent-color property in CSS specifies the color of user interface elements/controls like checkboxes, radio buttons, range, and progress elements.
Syntax:
accent-color: auto|<color>|initial|inherit;
Property Value:
- auto: It represents the UA-chosen color that will set the accent color for the control elements.
- <color>: It specifies the color for an accent color in RGB representation, hex representation, and also with the color name.
- initial: It sets the accent-color property to its default value. The default value of this property is auto.
- inherit: It inherits this property from its parent component.
Example 1: The following code demonstrates the accent-color property of CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >CSS accent-color Property</ title > < style > h1 { color: green; } input { width: 30px; height: 30px; } .accent { accent-color: red; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h3 >CSS accent-color Property</ h3 > < input type = "checkbox" name = "" > < input type = "checkbox" name = "" class = "accent" > < input type = "radio" name = "" > < input type = "radio" name = "" class = "accent" > </ center > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >CSS accent-color Property</ title > < style > h1 { color: green; } .accent { accent-color: red; } input, progress { width: 300px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h3 >CSS accent-color Property</ h3 > < input type = "range" name = "" > < br > < input type = "range" name = "" class = "accent" > < br > < progress >Abc</ progress > < br > < progress class = "accent" >Abc</ progress > </ center > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 93
- Firefox 92
- Safari 15.4
- Opera 79
- Edge 93
Contact Us