This content originally appeared on web.dev and was authored by Adam Argyle
Today's HTML form elements are difficult to customize. It feels as if it's a choice between few or no custom styles, or resetting input styles and build it up from scratch. Building it up from scratch ends up being much more work than anticipated. It can also lead to forgotten styles for element states (indeterminate, I'm looking at you), and the loss of built-in accessibility features. To fully recreate what the browser provides may be more work than you're looking to take on.
accent-color: hotpink;CSS accent-color from the CSS UI
specification is here to tint
elements with one line of CSS, saving you from customization efforts by
providing a way to bring your brand into elements.
The accent-color property also works with
color-scheme, allowing authors to tint both
the light and dark elements.
In the following example the user has a dark theme active, the page uses
color-scheme: light dark, and uses the same accent-color: hotpink for dark
themed hotpink tinted controls.
Browser support #
As of this writing, Chromium 93+ and Firefox 92+ support accent-color.
Supported elements #
Currently, only four elements will tint via the accent-color property:
checkbox, radio, range and
progress. Each can be previewed here
https://accent-color.glitch.me in light and
dark color schemes.
Warning:
If the following demo elements are all the same color,
then your browser doesn't support accent-color yet.
Checkbox #
Radio #
Range #
Progress #
Guaranteeing contrast #
To prevent inaccessible elements from existing, browsers with accent-color
need to determine an eligible contrast
color to be used alongside the custom
accent. Below is a screenshot demonstrating how Chrome 94 (left) and Firefox 92
Nightly (right) differ in their algorithms:
The most important thing to take away from this, is to trust the browser. Provide a brand color, and trust that it will make smart decisions for you.
The browser will not change your color in a dark theme.
Extra: More tinting #
You may be wondering how to tint more than these four form elements? Here's a minimal sandbox which tints:
- the focus ring
- text selection highlights
- list markers
- arrow indicators (Webkit only)
- scrollbar thumb (Firefox only)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}Potential future #
The spec does not limit the application of accent-color to the four elements
shown in this article, more support could be added later. Elements like the
selected <option> in a <select> could be highlighted with the
accent-color.
What else do you like to tint on the web? Tweet @argyleink with your selector and it might get added to this article!
This content originally appeared on web.dev and was authored by Adam Argyle
Adam Argyle | Sciencx (2021-08-11T00:00:00+00:00) CSS `accent-color`. Retrieved from https://www.scien.cx/2021/08/11/css-accent-color/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.