Los controles de formulario nativos fueron intocables durante dos décadas, razón por la cual cada sistema de diseño terminó pintando su propia casilla de verificación; el anillo de enfoque, el paso del teclado y la auditoría del modo oscuro se convirtieron en su trabajo. El color de acento es el camino intermedio y tiene un valor brillante por carácter.
:root { accent-color: crimson; }¿Hasta dónde llega una línea?
- La propiedad alcanza casilla de verificación, radio, alcance, progreso y medidor; la marca, el diamante y el pulgar mantienen sus formas nativas y simplemente toman su color.
- El navegador calcula el contraste con el acento, por lo que los glifos marcados y la pista completa permanecen legibles en cualquier combinación de colores que muestre la página.
- Configúrelo en :root y todos los controles heredan; configúrelo en un control y solo ese cambiará, la forma barata de marcar un único interruptor destructivo.
Acento versus controles personalizados completos
El control total sobre el dibujo sigue estando disponible cuando la superficie de un héroe exige una forma exacta, y si se trata de un contrato de marca, está bien. Durante el resto del formulario, los controles nativos con acento siguen siendo accesibles de forma gratuita y siguen mejorando a medida que los motores perfeccionan su pintura. Un intercambio muy interesante: sin atributo ARIA a cambio de una paleta.
Combínelo deliberadamente con una combinación de colores. Una raíz que declara claro oscuro más un acento mantiene los controles coherentes en todo el esquema de color preferido sin un segundo archivo de tema.