v137 · css · forms
Form Accent Showcase
Every native form control — checkbox, radio, range, progress, select — rendered with three accent modes: system-accent-color (follows OS accent), a custom hex color, and browser default. Switch between modes to see how controls adapt, and compare the CSS property values generated for each.
Controls
Checking system-accent-color support…
Accent mode:
system-accent-color is a CSS system color that returns the
OS-level accent color chosen by the user (e.g. macOS System Preferences → Appearance,
or Windows Settings → Personalization → Colors). When set as accent-color,
form controls will tint to match the user's system theme, improving visual coherence
for installed PWAs and native-feeling web apps.