Tillitsdone
down Scroll to discover

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.
thumbnail

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

PropertyValue
Initial valueauto
Applies toall elements
Inheritedyes
Computed valueauto is computed as specified, and <color> values are computed as defined for the color property.
Animation typeby 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:

See Also

For further reading and related resources, explore the following topics:

Understanding the accent-color property and its applications can enhance the visual appeal and user experience of your web designs.

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.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.