Lleve el color de su marca a las entradas de formulario integradas en HTML con una línea de código.
Los elementos de formulario HTML actuales son difíciles de personalizar. Se siente como si fuera una elección entre pocos o ningún estilo personalizado, o restablecer los estilos de entrada y construirlos desde cero, lo cual implica mucho más trabajo del previsto. También puede provocar el olvido de estilos para elementos de estado (indeterminado, te estoy viendo) y la pérdida de funciones de accesibilidad integradas. Recrear por completo lo que proporciona el navegador, puede ser más trabajo del que está buscando.
accent-color: hotpink;
La propiedad CSS accent-color de la especificación de la interfaz de usuario de CSS está aquí para teñir elementos con una línea de CSS, lo que le ahorra esfuerzos de personalización al proporcionar una forma de llevar su marca a los elementos.
La propiedad accent-color también funciona con color-scheme, lo que permite a los autores teñir tanto los elementos claros como los oscuros. En el siguiente ejemplo, el usuario tiene un tema oscuro activo, la página usa color-scheme: light dark, y usa el mismo accent-color: hotpink para controles teñidos de hotpink con temas oscuros.
Compatibilidad del navegador
En el momento de escribir estas líneas, Chromium 93+ y Firefox 92+ admiten accent-color.
Elementos compatibles
Actualmente, solo cuatro elementos se pueden teñir a través de la propiedad accent-color: casilla de verificación, radio, rango y progreso. Cada uno se puede previsualizar aquí https://accent-color.glitch.me en esquemas de colores claros y oscuros.
Casilla de verificación
Radio
Rango
Progreso
Garantizando el contraste
Para evitar que existan elementos inaccesibles, los navegadores con accent-color deben determinar un color de contraste elegible para usar junto con el acento personalizado. A continuación se muestra una captura de pantalla que demuestra cómo Chrome 94 (izquierda) y Firefox 92 Nightly (derecha) difieren en sus algoritmos:
Lo más importante que hay que sacar de esto es confiar en el navegador. Proporcione un color de marca y confíe en que tomará decisiones inteligentes por usted.
Extra: más tinte
Quizás se esté preguntando cómo teñir más de estos cuatro elementos de forma. Aquí hay un entorno de pruebas mínimo que tiñe:
- el anillo de enfoque
- resaltado de la selección de texto
- marcadores de lista
- indicadores de flecha (solo Webkit)
- pulgar de la barra de desplazamiento (solo Firefox)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
Futuro potencial
La especificación no limita la aplicación de accent-color a los cuatro elementos que se muestran en este artículo, más adelante se podrían agregar más elementos compatibles. Los elementos como <option> en <select> podrían resaltarse con el accent-color.
¿Qué más le gusta teñir en la web? ¡Envíe un tweet a @argyleink con su selector y es posible que se agregue a este artículo!