CSS Accent-Color Enhance Web Design with Custom Colors

CSS accent-color enhances web design by customizing colors of form controls like checkboxes, radio buttons, and progress bars.

Available options include auto, color values, and global values.

Introduction

The accent-color CSS property lets you customize the accent color of various user interface elements, enhancing the visual appeal and consistency of your web designs. This property can be applied to elements like checkboxes, radio buttons, range inputs, and progress bars to ensure a harmonious user experience.

This guide will walk you through the essentials of the accent-color property, including its limited availability, supported HTML elements, syntax, values, examples, specifications, browser compatibility, and related resources. Whether you’re a seasoned developer or just starting out, understanding accent-color can significantly improve the look and feel of your projects.

Limited Availability

Note that the accent-color property is not yet widely supported across all browsers. As of now, it’s a non-baseline feature, meaning it may not work in some widely-used browsers. Be aware of these limitations when using it in your projects.

For more details on compatibility and to provide feedback, check out these resources:

Description

The accent-color property sets the accent color for user interface controls, allowing you to override the default colors provided by the browser. This gives you greater control over the appearance of elements like checkboxes, radio buttons, range inputs, and progress bars, ensuring a cohesive and visually appealing design.

Supported HTML Elements

The accent-color property currently supports the following HTML elements:

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

Each browser has its own default accent color for these elements. The accent-color property is only applied to controls that utilize an accent color.

Syntax and Values

The syntax for the accent-color property is straightforward. Here’s how to use it:

/* Keyword values */
accent-color: auto;

/* <color> values */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Values:

auto: Uses the user agent’s default color.
<color>: Specifies a custom color using names, hex codes, RGB, or HSL values.
Global values: Inherit from parent, reset to initial, etc.

Formal Definition

Property	Value
Initial value	`auto`
Applies to	all elements
Inherited	yes
Computed value	`auto` is computed as specified, and `<color>` values are computed as defined for the `color` property.
Animation type	by computed value type

Examples

Setting a Custom Accent Color

HTML:

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS:

input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

In this example, the first checkbox uses the default accent color, while the second checkbox has a custom accent color set to rebeccapurple.

Customizing Multiple Elements

HTML:

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
<input type="radio" name="group" />
<input type="radio" name="group" class="custom" />
<input type="range" />
<input type="range" class="custom" />
<progress value="50" max="100"></progress>
<progress value="50" max="100" class="custom"></progress>

CSS:

input, progress {
  accent-color: auto;
  display: block;
  margin: 10px 0;
}

.custom {
  accent-color: hotpink;
}

Using `accent-color` with Global Values

HTML:

<div class="parent">
  <input type="checkbox" checked />
  <input type="checkbox" class="child" checked />
</div>

CSS:

.parent {
  accent-color: blue;
}

.child {
  accent-color: inherit;
}

Specifications

The accent-color property is defined in the CSS Basic User Interface Module Level 4 under the widget-accent section. This specification is currently in the Working Draft stage.

Browser Compatibility

To check the compatibility of the accent-color property and provide feedback, refer to the following resources:

Browser Compatibility

Desktop Browsers

Google Chrome: Supported since version 93.
Firefox: Supported since version 92.
Safari: Supported since version 15.4.
Opera: Supported since version 79.
Edge: Supported since version 93.

Mobile Browsers

iOS Safari: Supported since version 15.4.
Android Chrome: Supported since version 104.
Android Firefox: Supported since version 101.
Android Browser: Supported since version 104.
Opera Mobile: Not supported.

Additional Notes

While accent-color can enhance your web designs, be aware of its limited browser support. Always test across different browsers and devices for a consistent user experience.

For the latest updates, visit MDN Web Docs.

By understanding and using the accent-color property, you can create visually appealing and user-friendly web designs.