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>