CSS accent-color Property

The accent-color property in CSS allows you to set the accent color for user-interface controls, such as checkboxes, radio buttons, and range sliders. This property helps customize these controls to align with your website’s theme and design.

Syntax of accent-color

</>

Copy

accent-color: auto | <color> | initial | inherit;

Values

Value	Description
`auto`	The default browser-defined accent color for user interface controls.
`<color>`	A valid CSS color value (e.g., `red`, `#ff0000`, `rgb(255, 0, 0)`, `hsl(0, 100%, 50%)`).
`initial`	Resets the property to its default value (which is `auto` for `accent-color`).
`inherit`	Inherits the `accent-color` value from its parent element.

Default Value

auto

Examples for accent-color

Using the CSS accent-color Property

This example demonstrates how the accent-color property can be applied to various form controls, such as checkboxes, radio buttons, range sliders, and progress bars.

</>

Copy

input[type=checkbox] {
  accent-color: red;
}

input[type=radio] {
  accent-color: green;
}

input[type=range] {
  accent-color: rgb(128, 0, 128);
}

progress {
  accent-color: hsl(200, 70%, 50%);
}

Complete HTML Example

The following is a complete html file where we have HTML form controls, and we have set the accent-color property to the form elements.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS accent-color Property</title>
<style>
    input[type=checkbox] {
      accent-color: red;
    }

    input[type=radio] {
      accent-color: green;
    }

    input[type=range] {
      accent-color: rgb(128, 0, 128);
    }

    progress {
      accent-color: hsl(200, 70%, 50%);
    }
</style>
</head>
<body>

<h1>CSS accent-color Property</h1>

<h3>Checkbox Example:</h3>
<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter"> Subscribe to newsletter</label><br>
<input type="checkbox" id="updates" name="updates" checked>
<label for="updates"> Receive updates</label><br><br>

<h3>Radio Button Example:</h3>
<input type="radio" id="choice1" name="choices" value="option1">
<label for="choice1"> Option 1</label><br>
<input type="radio" id="choice2" name="choices" value="option2" checked>
<label for="choice2"> Option 2</label><br>

<h3>Range Slider Example:</h3>
<label for="volume">Adjust volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<h3>Progress Bar Example:</h3>
<label for="progress">Upload Progress:</label>
<progress id="progress" value="60" max="100"> 60% </progress>

</body>
</html>

Using the accent-color Property in JavaScript

In JavaScript, you can dynamically set the accent-color property of an element by accessing the style.accentColor property.

</>

Copy

object.style.accentColor = "red";

Example for Setting Accent Color Dynamically in JS

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>Change Accent Color with JavaScript</h1>
  <h3>Checkbox Example:</h3>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checkbox 1</label><br>
  <button id="changeColorBtn">Change Accent Color</button>
  <script>
    // Function to change accent colors dynamically
document.getElementById("changeColorBtn").addEventListener("click", function () {
      const checkboxes = document.querySelectorAll("input[type='checkbox']");

      // Set accent color for checkboxes
      checkboxes.forEach(checkbox => {
        checkbox.style.accentColor = "red";
      });
    });
  </script>
</body>
</html>

Explanation:

A button with the ID changeColorBtn is used to trigger the JavaScript function.
It iterates through the checkboxes and sets their accentColor to blue.
It also iterates through the radio buttons and sets their accentColor to red.

Browser Support

The accent-color property is supported in most modern browsers, including Chrome, Edge, and Firefox. The latest version of each browser that supports accent-color property is given in the following table.

Browser	Version
Chrome	93.0
Edge	93.0
Firefox	92.0
Safari	15.4
Opera	79.0

TutorialKart

CSS accent-color Property