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