liveBook · Manning

Accent-color

As explained in Tiny CSS Projects

The CSS accent-color property specifies the accent color used by supported form controls.

Want a progress indicator to match a loading screen, or check boxes and radio buttons to match a form? Set `accent-color` to change the color chosen for those native controls. It is a quick color change, not a way to redesign the whole control. section 3.6.1 section 10.3.3

Listing 3.15 Progress rule
progress {
  height: 24px;
  width: 100%;
  accent-color: #128688;
}

A progress bar can fill its section while using `#128688` for its colored indicator. section 3.6.1

Match form controls to an accent color

Apply `accent-color: var(--accent);` to `input[type="radio"]` and `input[type="checkbox"]`. Their native controls use the chosen color instead of the previous light-blue default. section 10.3.3

Color is the practical limit. Increasing the form’s font size does not enlarge these controls. For custom sizing or further visual changes, keep the HTML control but replace its native appearance with `appearance: none` and build its visual styles. A progress element has its own trap: adding `background: pink` can disrupt its appearance and the accent color rather than produce a pink track. section 10.3.3 section 3.6.1

How Tiny CSS Projects covers it

How deep it goes
Demonstrates declarations and visible results, then explains why custom sizing or broader restyling requires replacing native appearance.
Examples
Shows a teal progress indicator and form controls colored with `var(--accent)`, alongside a font-size test and a failed progress background.
What it assumes
Uses existing progress and form controls with CSS selectors; the form example also uses an existing custom property.
What you can do after
Operate/configure native control colors with accent-color, and recognize when further styling calls for replacing native appearance.
How it connects
Connects accent-color to progress elements, radio buttons, check boxes, CSS custom properties, and appearance.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.