✅Qué es accent-color en CSS y Cómo Usarlo en Checkboxes, Radios y Más en WordPress

¿Cansado de que tus formularios tengan ese estilo gris y aburrido del navegador? Hoy te presento una propiedad que probablemente no conocías: accent-color.

Con solo una línea de CSS, puedes cambiar el color de los checkboxes, botones de radio, sliders y otros elementos de formulario que antes eran casi imposibles de personalizar sin hacks o JavaScript.

Si aún no sabes CSS revisa esta Guía de Introducción. Clic aquí.

¿Qué es `accent-color`?

accent-color es una propiedad de CSS que permite cambiar el color de acento de ciertos elementos del formulario que, hasta hace poco, dependían por completo del estilo del sistema operativo o del navegador.

Funciona con:

input[type="checkbox"]
input[type="radio"]
input[type="range"] (en algunos navegadores)
progress
y algunos otros nativos del navegador.

Ejemplo básico

input[type="checkbox"],
input[type="radio"] {
  accent-color: #FCCB17;
}

Esto hará que:

La marca del checkbox aparezca en color #FCCB17 (un naranja amarillento).
El círculo interior del botón radio también use ese color cuando esté seleccionado.

Demo rápida

<form>
  <label>
    <input type="checkbox" name="acepto"> Acepto las condiciones
  </label><br>
  <label>
    <input type="radio" name="sexo" value="hombre"> Hombre
  </label>
  <label>
    <input type="radio" name="sexo" value="mujer"> Mujer
  </label>
</form>

input[type="checkbox"],
input[type="radio"] {
  accent-color: #FCCB17;
}

Y listo. El formulario se integra visualmente con tu branding sin tocar HTML.

Cómo usarlo en WordPress

Puedes aplicar esto globalmente a través de:

1. CSS adicional

Ve a Apariencia > Personalizar > CSS adicional y añade:

input[type="checkbox"],
input[type="radio"] {
  accent-color: #FCCB17;
}

2. Desde el `style.css` del tema hijo

Si tienes un tema hijo, lo metes ahí y listo.

Personalizar sliders y `input[type=range]`

Algunos navegadores (Chrome, Edge…) permiten aplicar accent-color también a sliders:

input[type="range"] {
  accent-color: #FCCB17;
}

Demo rápida

<form>
  <label for="volumen">Volumen:</label><br>
  <input type="range" id="volumen" name="volumen" min="0" max="100" value="50">
</form>

Aunque si quieres un diseño completamente a medida para sliders, aún necesitarás ::-webkit-slider-thumb, pero para pequeños cambios, esto funciona genial.

Ventajas

No necesitas plugins.
No necesitas JavaScript.
Respeta la accesibilidad.
Funciona en la mayoría de navegadores modernos (Chrome, Firefox, Edge, Safari…).

Compatibilidad

Navegador	Soporte
Chrome	✅ Sí
Firefox	✅ Sí
Edge	✅ Sí
Safari	✅ Sí
Internet Explorer	❌ No (pero ya no importa)

Bonus: aplica el color de acento solo en formularios de comentarios o WooCommerce

Solo en el formulario de comentarios:

.comment-form input[type="checkbox"],
.comment-form input[type="radio"] {
  accent-color: #FCCB17;
}

Solo en WooCommerce:

.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
  accent-color: #FCCB17;
}

Conclusión

accent-color es una de esas pequeñas joyas que simplifican la vida: sin complicarte, sin sobrecargar tu web y con soporte moderno. Una sola línea de CSS y tus formularios dejarán de parecer salidos de Windows 98.

Nos vemos en el siguiente tutorial. Un saludo.