✅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

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.