La :focuspseudoclase en CSS se usa para diseñar un elemento que actualmente está dirigido por el teclado o activado por el mouse. Aquí hay un ejemplo:
textarea:focus ( background: pink; )Cualquier elemento (más comúnmente sys ) está en "foco" cuando está seleccionado y listo para ingresar texto (como cuando un cursor está parpadeando). Los usuarios del mouse pueden hacer clic en ellos (o en sus parientes label) para enfocar, y los usuarios del teclado pueden presionarlos.
"Tabulación"
Otro uso de la :focuspseudoclase es "tabular" a través de elementos. Muchos navegadores tienen un estado de enfoque predeterminado para la selección de pestañas, que es un contorno de puntos. Es bastante fácil de quitar, pero asegúrese de reemplazarlo con una alternativa adecuada si lo hace.
s, s, s, y textareas todos tienen el :focus estado por defecto, pero se puede dar un estado de selección en cualquier elemento en HTML. Ambos atributos contenteditable y tabindexfuncionan para esto, como en este ejemplo:
Relacionado
Artículo el 12 de mayo de 2017La pseudoclase `: focus-within`
Chris Coyier
Soporte del navegador
Todos los navegadores admiten el uso básico de :focus.