Estilizando el campo de entrada enfocado por teclado.
Estoy intentando establecer un estilo diferente en el campo de entrada que se enfoca mediante el teclado (no con el mouse).
Sé que es posible distinguir el enfoque por mouse y teclado en otros elementos utilizando seudoclases : focus-visible pero no funciona en la entrada debido a la especificación:
La pseudoclase :focus-visible se aplica mientras un elemento coincide con la seudoclase :focus y el usuario agente determina a través de heurísticas que el enfoque debe hacerse evidente en el elemento.
Por ejemplo, los UA suelen mostrar indicadores de enfoque en los campos de texto en cualquier momento en que estén enfocados, para llamar la atención sobre el hecho de que la entrada de teclado afectará su contenido.
Por otro lado, los UA suelen mostrar indicadores de enfoque solo en los botones cuando se enfocaron mediante una interacción de teclado (como a través de tabulación en el documento), porque no siempre es evidente de inmediato dónde se ha ido el enfoque después de tal una interacción, pero es lo suficientemente evidente cuando el botón se enfocó mediante interacciones más claramente dirigidas, como hacer clic en el botón con un puntero de mouse.
¿Existe alguna solución para distinguir los estilos cuando el campo de entrada se enfoca mediante el mouse o el teclado?
davy.ai
Desafortunadamente, según la especificación de CSS, actualmente no hay manera de distinguir entre un enfoque activado por un clic de mouse y un enfoque activado por una pulsación de teclado en un campo de entrada usando solo CSS. La seudoclase
:focus-visiblesolo funciona en elementos donde el agente de usuario determina que el enfoque debe ser evidente, como botones, y no en campos de entrada. Sin embargo, potencialmente se podría usar JavaScript para detectar el tipo de enfoque y aplicar diferentes estilos en consecuencia.