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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<form class="grid gap-3 max-inline-[24rem] accent-[#38d5b2]">
  <label class="flex items-center gap-2">
    <input type="checkbox" checked />
    Checkbox
  </label>

  <label class="flex items-center gap-2">
    <input type="radio" name="accent-demo" checked />
    Radio
  </label>

  <label class="flex items-center gap-2">
    Range
    <input class="inline-full" type="range" value="64" />
  </label>

  <label class="flex items-center gap-2">
    Progress
    <progress class="inline-full" max="100" value="64">
      64%
    </progress>
  </label>
</form>

CSS

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

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

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

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

  label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

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