accent-color

by

The accent-color CSS property allows you to customize the color of user interface (UI) elements provided by the browser, such as checkboxes, radio buttons, progress bars, and more.

This property simplifies the process of theming these native controls to match your website’s design without the need for complex styling or custom components.

It automatically adapts to the user’s operating system preferences or browser settings, ensuring accessibility and consistency across different platforms.

Syntax

accent-color: <color>;
  • Replace <color> with any valid CSS color value, such as:
    Named colors (e.g., red, blue, green)
  • Hexadecimal codes (e.g., #FF0000, #0000FF, #008000)
  • RGB values (e.g., rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 128, 0))
  • HSL values (e.g., hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%))
  • currentColor keyword (inherits the color from the parent element)

Examples

Changing the Color of Checkboxes and Radio Buttons

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accent Color Example</title>
  <style>
    /* Apply accent color to all checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: #4CAF50; /* Green */
    }
  </style>
</head>
<body>
  <label>
    <input type="checkbox">
    Accept Terms and Conditions
  </label>
  <br>
  <label>
    <input type="radio" name="option">
    Option 1
  </label>
  <label>
    <input type="radio" name="option">
    Option 2
  </label>
</body>
</html>

In this example:

  • All checkboxes and radio buttons will have a green accent color (#4CAF50).
  • The accent-color affects the checkmark, border, and other accent parts of the control.

Styling Progress Bars

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Progress Bar Accent Color</title>
  <style>
    progress {
      accent-color: #2196F3; /* Blue */
      width: 100%;
      height: 20px;
    }
  </style>
</head>
<body>
  <progress value="70" max="100"></progress>
</body>
</html>

Here, the progress bar will display in blue (#2196F3).

Applying to multiple elements

button, input[type="checkbox"], input[type="radio"], progress, slider,::-webkit-scrollbar-thumb {
    accent-color: #FF0000; /* Set accent color to red */
}

Using currentColor

.button {
    color: blue;
}

.button::-moz-focus-inner, .button::-webkit-focus-inner {
    border: 0;
}

.button:focus {
    outline: none;
    accent-color: currentColor; /* Inherit color from the button */
}

Overriding system preferences

:root {
    --accent-color: #FF0000; /* Set a custom accent color */
}

button, input[type="checkbox"], input[type="radio"], progress, slider,::-webkit-scrollbar-thumb {
    accent-color: var(--accent-color);
}

Browser compatibility

  • accent-color is widely supported in modern browsers, including Chrome, Firefox, Edge, Safari, and Opera.
  • For older browsers, you may need to use vendor-specific prefixes or polyfills.

Additional tips

  • Consider using a CSS preprocessor like Sass or Less to manage accent colors more efficiently.
  • Test your styles across different browsers and operating systems to ensure compatibility.
  • Be mindful of accessibility guidelines when choosing accent colors.