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

.accent-color-demo {
  display: grid;
  gap: 0.75rem;
  max-inline-size: 24rem;
}

.accent-color-demo label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.accent-color-demo :where(input[type="range"], progress) {
  inline-size: 100%;
}