CSS accent-color Property
Last Updated :
26 Jul, 2022
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 >GeeksforGeeks</ 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 >GeeksforGeeks</ 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
Share your thoughts in the comments
Please Login to comment...