CSS properties - accent-color

revision:January 28, 2025

accent-color property

- specifies the accent color for user-interface controls like: <input type="checkbox">, <input type="radio">, <input type="range"> and <progress>.

CSS syntax : accent-color: auto|color|initial|inherit;

Property values

auto : default value. The browser choose the accent color

color : specifies the color to be used as the accent color. All legal color values can be used (rgb, hex, named-color, etc).

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.accentColor="red"

example: accent-color

Accent color for checkboxes:




Accent color for radiobuttons:



Accent color for a range field:

Accent color for a progress element:

72%
code: 
                    <div>
                        <h4>Accent color for checkboxes:</h4>
                        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" checked>
                        <label for="vehicle1"> I have a bike</label><br>
                        <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" checked>
                        <label for="vehicle2"> I have a car</label><br><br>
            
                        <h4>Accent color for radiobuttons:</h4>
                        <input type="radio" id="html" name="fav_language" value="HTML">
                        <label for="html">HTML</label><br>
                        <input type="radio" id="css" name="fav_language" value="CSS" checked>
                        <label for="css">CSS</label><br>
            
                        <h4>Accent color for a range field:</h4>
                        <label for="vol">Volume:</label>
                        <input type="range" id="vol" name="vol" min="0" max="50">
            
                        <h4>Accent color for a progress element:</h4>
                        <label for="file">Downloading progress:</label>
                        <progress id="file" value="72" max="100"> 72% </progress>
                    </div>
                    <style>
                        input[type=checkbox]{accent-color: red;}
                        input[type=radio]{accent-color: green;}
                        input[type=range]{accent-color: rgb(0, 0, 255);}
                        progress{accent-color: hsl(39, 100%, 50%);}
            
                    </style>