Playground de accent-color en CSS

Explora accent-color con un selector de color para personalizar controles nativos como checkbox, radio, range y progress sin 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

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<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%;
  }
}