CSS accent-color playground

Explore accent-color with a color picker to customize native checkbox, radio, range, and progress controls without JavaScript.

HTML

<form class="accent-color-demo">
  <label>
    <input type="checkbox" checked />
    Checkbox
  </label>

  <label>
    <input type="radio" name="accent-demo" checked />
    Radio
  </label>

  <label>
    Range
    <input type="range" value="64" />
  </label>

  <label>
    Progress
    <progress max="100" value="64">64%</progress>
  </label>
</form>

CSS

:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: #38d5b2;
}