BaselineLab
0Apoyar

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.

Leer la guía

Preguntar a la IA

Playground de accent-color en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.
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%;
}

Guía educativa de accent-color

Da color a los controles sin reconstruirlos

accent-color propone un acento para los controles nativos. El navegador conserva su forma, interacción y estados; tú eliges el color y compruebas el resultado.

Volver al playground

Modelo mental

Un acento heredable, no una pintura completa del control.

Acepta auto o un color. auto deja la elección al navegador: no promete un tono concreto ni reproducir siempre el acento del sistema. La propiedad se hereda, así que puedes establecerla en un contenedor; una declaración aplicada directamente al input tiene prioridad sobre el valor heredado.

Se aplica a las partes que el navegador dibuja con un acento. No define la forma, el tamaño, todos los fondos ni el indicador de foco. Conserva la apariencia nativa: quitarla con appearance: none puede eliminar la parte que esperabas teñir.

Controles y estados

Prueba checkbox, radio, range y progress con una sola declaración.

Son los cuatro controles documentados actualmente. Marca y desmarca las casillas, cambia de plan con las flechas y ajusta el deslizador. No todos los estados usan el acento: un control sin marcar o deshabilitado puede conservar colores del navegador. progress representa aquí un 60% fijo; mover el rango no lo actualiza.

Un acento compartido y una excepción con auto

Preferencias y plan
Casillas, radios, rango y progreso conservan su comportamiento nativo. La última casilla recupera el acento automático; los estados también se distinguen por marca, posición y etiquetas.
Un acento compartido y una excepción con auto
<div class="accent-guide-controls">
  <fieldset>
    <legend>Preferencias y plan</legend>
    <label><input type="checkbox" checked /> Casilla marcada</label>
    <label><input type="checkbox" /> Casilla sin marcar</label>
    <label><input type="checkbox" checked disabled /> Casilla deshabilitada</label>
    <label><input type="radio" name="accent-guide-plan" value="monthly" checked /> Plan mensual</label>
    <label><input type="radio" name="accent-guide-plan" value="yearly" /> Plan anual</label>
  </fieldset>
  <label>
    Volumen
    <input type="range" min="0" max="100" value="60" />
  </label>
  <label>
    Progreso de la descarga — 60%
    <progress max="100" value="60">60%</progress>
  </label>
  <label class="automatic">
    <input type="checkbox" checked /> Acento automático del navegador
  </label>
</div>
.accent-guide-controls {
  accent-color: #7c3aed;
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  font-size: 1rem;

  fieldset {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-block-size: 2.75rem;
  }

  :is(input, progress) {
    accent-color: inherit;
  }

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

  input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .automatic {
    accent-color: auto;
  }
}

accent-color: inherit en los controles hace explícita la herencia incluso si otra regla general les asigna un acento. Los nombres del grupo de radios son exclusivos de este ejemplo. El estado indeterminado de una casilla se establece con JavaScript; accent-color solo participa en su presentación.

Temas y contraste

El mismo control necesita revisarse sobre sus fondos reales.

color-scheme comunica qué esquemas admite una zona y afecta a la apariencia nativa; no cambia por sí solo todos tus colores de autor. Esta comparación fuerza light y dark en dos grupos, usa Canvas/CanvasText para sus superficies y elige un acento para cada uno. En una página que admite ambos esquemas, color-scheme: light dark permite seguir la preferencia del usuario.

Comparación nativa en claro y oscuro

Esquema claro
Esquema oscuro
Los dos grupos mantienen sus esquemas locales aunque cambies el tema de la web. Las casillas marcadas y deshabilitadas permiten comparar estados; el navegador decide qué partes reciben el acento.
Comparación nativa en claro y oscuro
<div class="accent-guide-themes">
  <fieldset class="light">
    <legend>Esquema claro</legend>
    <label><input type="checkbox" checked /> Recibir avisos</label>
    <label><input type="checkbox" disabled checked /> Casilla deshabilitada</label>
  </fieldset>
  <fieldset class="dark">
    <legend>Esquema oscuro</legend>
    <label><input type="checkbox" checked /> Recibir avisos</label>
    <label><input type="checkbox" disabled checked /> Casilla deshabilitada</label>
  </fieldset>
</div>
.accent-guide-themes {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  font-size: 1rem;

  fieldset {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-block-size: 2.75rem;
  }

  :is(input, progress) {
    accent-color: inherit;
  }

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

  input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  fieldset {
    background: Canvas;
    color: CanvasText;

    legend {
      background: Canvas;
    }
  }

  .light {
    color-scheme: light;
    accent-color: #6d28d9;
  }

  .dark {
    color-scheme: dark;
    accent-color: #c4b5fd;
  }
}

El navegador puede ajustar el acento o el color de la marca para mantener legibilidad, pero no es una garantía de contraste accesible. Comprueba marca, borde, fondo y foco en los estados pertinentes y en los navegadores objetivo. En colores forzados, permite que actúe la paleta del usuario; no impongas forced-color-adjust: none para conservar tu marca.

Errores frecuentes

Diagnostica el elemento, el estado y el fondo antes de añadir CSS.

El select o el campo de texto no cambian

Resultado esperado
Personalizar todos los campos con el mismo acento.
Causa
accent-color no es una API general para teñir select, botones, campos de texto o meter.
Solución
Elige la herramienta según la necesidad: CSS del control, select personalizable para su presentación o field-sizing para su tamaño. Mantén labels, teclado y foco.

La casilla deshabilitada no conserva el color exacto

Resultado esperado
Usar el mismo tono en todos los estados y plataformas.
Causa
La apariencia nativa decide cuándo emplear el acento y puede ajustar sus colores.
Solución
Acepta las diferencias nativas y revisa marcado, sin marcar, disabled, hover y foco. Si necesitas rediseñar el control completo, ese trabajo supera accent-color.

El color de marca se ve, pero cuesta leer el control

Resultado esperado
Distinguir el estado y localizar el foco con claridad.
Causa
Un acento cercano al fondo o un ajuste del navegador insuficiente puede ocultar detalles. La compatibilidad de sintaxis no prueba contraste.
Solución
Revisa el resultado compuesto en ambos temas, conserva el foco visible y prueba colores forzados. Cambia el acento si hace falta; no comuniques estado solo mediante color.

Soporte y compatibilidad

La declaración y el resultado visual son comprobaciones diferentes.

Consulta el estado Baseline y el detalle por navegador. BCD registra una limitación de contraste en Chrome para Android y en Safari anterior a 26.2. No extrapoles el resultado de esta preview a otras plataformas ni a todos los estados.

Sin soporte, se ignora la declaración y permanece el control nativo. Ese es el fallback de estos ejemplos: no sustituyen los controles ni simulan un acento. CSS.supports solo confirma que se acepta la sintaxis, no el teñido de cada parte ni su legibilidad.

Guía de select nativo: opciones, datos y tecladoGuía de select personalizable: apariencia y pickerGuía de field-sizing: tamaño según el contenido