Codectionary / Developer documentation / CSS

Native Form Accents with accent-color

accent-color requests an accent for supported native controls such as checkboxes, radio buttons, ranges, and progress bars. Browsers retain their native control behavior and can adjust rendering for contrast. Exact appearance and supported controls vary by engine and operating system.

Syntax

input { accent-color: #6d28d9; }

Examples

Native Form Accents with accent-color: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

input, progress { accent-color: #6d28d9; }
  1. Expected result: Supporting native controls use a purple accent while retaining their standard interactions.
  2. The browser handles the control’s checked, hovered, and disabled states.
  3. This approach changes a color rather than rebuilding the entire control.
HTML used by this example

<label><input type="checkbox" checked> Subscribe</label><p><label>Volume <input type="range" min="0" max="100" value="65"></label></p><label>Completion <progress max="100" value="65">65%</progress></label>

Best practices

  • Test in forced-colors and high-contrast environments.
  • Keep native controls when a color adjustment meets the design requirement.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading