accent-color
The accent color of built-in form controls: checkboxes, radio buttons, sliders and progress bars.
Syntax
accent-color: color;Values
| Parameter | Type | Description |
|---|---|---|
| color | color | Any color. |
| auto | keyword | The browser's default accent. |
Examples
Form controls in the brand color with one line:
<style>
.brand { accent-color: deeppink; }
</style>
<div class="brand">
<label><input type="checkbox" checked> Checkbox</label>
<label><input type="radio" checked> Radio</label>
<input type="range">
<progress value="60" max="100"></progress>
</div>Notes
This is the easiest way to match native controls to the site's colors without rebuilding them. Supported in all current browsers.
See also
- :checked — Matches a checked checkbox or radio button, and a selected `<option>`.
- color-scheme — Tells the browser which color schemes the page supports, so built-in controls and scrollbars match.
- appearance — Turns off the built-in look of form controls so they can be styled from scratch.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.