Aporta el color de tu marca a las entradas integradas del formulario HTML con una línea de código.
Los elementos actuales del formulario HTML son difíciles de personalizar. Se siente como si se tratara de elegir entre pocos diseños personalizados o ninguno, o restablecer los estilos de entrada y crearlos desde cero. Crearlo desde cero termina siendo mucho más trabajo de lo esperado. También puede llevar a que se pierdan estilos para estados de elementos (indeterminado, te estoy observando) y a la pérdida de las funciones de accesibilidad integradas. Recrear por completo lo que proporciona el navegador puede implicar más trabajo del que esperas realizar.
accent-color: hotpink;
El accent-color de CSS de la especificación de IU de CSS está aquí para ajustar el tono de los elementos con una línea de CSS, lo que te evita los esfuerzos de personalización, ya que proporciona una forma de incorporar tu marca en los elementos.
La propiedad accent-color también funciona con color-scheme, lo que permite a los autores ajustar el tono de los elementos claros y oscuros.
En el siguiente ejemplo, el usuario tiene un tema oscuro activo, la página usa color-scheme: light dark y el mismo accent-color: hotpink para los controles de tono de color rosa con tema oscuro.
Elementos compatibles
Actualmente, el tono de solo cuatro elementos se realiza a través de la propiedad accent-color: casilla de verificación, radio, rango y progreso. Puedes obtener una vista previa de cada una aquí https://accent-color.glitch.me con esquemas de colores claros y oscuros.
Casilla de verificación
Radio
Rango
Progreso
Garantizar el contraste
Para evitar que existan elementos inaccesibles, los navegadores con accent-color deben determinar un color de contraste apto para usar junto con el acento personalizado. A continuación, se incluye una captura de pantalla que muestra cómo difieren los algoritmos de Chrome 94 (izquierda) y Firefox 92 Nightly (derecha):
Lo más importante que debes aprender de esto es confiar en el navegador. Proporciona un color de marca y confía en que tomará decisiones inteligentes por ti.
Extra: Más tono
Quizás te estés preguntando cómo cambiar el tono de estos cuatro elementos de formulario. Esta es una zona de pruebas mínima con tonos:
- el anillo de enfoque
- selección de texto destacados
- enumerar marcadores
- indicadores de flecha (solo Webkit)
- miniatura 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; se podrían agregar más opciones de compatibilidad más adelante. Los elementos como el <option> seleccionado en una <select> se podrían destacar con el accent-color.
¿Qué más te gusta pintar en la Web? Tuitea a @argyleink con el selector y es posible que se agregue a este artículo.