Theming Native Checkboxes and Radio Inputs with CSS accent-color
Historically, styling native checkboxes, radio buttons, and range sliders required either hiding the native control and building custom fake <span class="custom-box"> elements or resetting appearance entirely with appearance: none. Custom checkbox workarounds frequently destroyed keyboard focus rings, high-contrast modes, and assistive technology hooks.
The CSS accent-color property allows developers to recolor the user-interface accent tint of native form controls with a single CSS declaration.
Example
<form class="preferences-form">
<label class="control-label">
<input type="checkbox" checked />
Enable hardware acceleration
</label>
<label class="control-label">
<input type="radio" name="theme" checked />
System default
</label>
<label class="control-label">
Volume
<input type="range" min="0" max="100" value="75" />
</label>
</form>Implementation
:root {
accent-color: var(--primarydark);
}
.preferences-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.control-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}When accent-color is set, the browser automatically calculates whether the checkmark or foreground indicator should be black or white to guarantee accessible contrast ratios against the chosen theme color.
Main Point: accent-color themes native form controls cleanly in one line without complex CSS hacks or breaking built-in browser accessibility.