:focus
La pseudo-clase :focus
CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.
/* Selecciona cualquier <input> cuando se enfoca */
input:focus {
color: red;
}
Nota:
Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice :focus-within
si desea seleccionar un elemento que contenga un elemento enfocado.
Sintaxis
Error: could not find syntax for this item
Ejemplo
HTML
<input
class="red-input"
value="Voy a ser de color rojo cuando enfoque." /><br />
<input class="blue-input" value="Voy a ser de color azul cuando enfoque." />
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
Resultado
Sobre Accesibilidad
Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de WCAG 2.1 requiere que el indicador de foco tenga un contraste de por lo menos 3:1.
- Indicadores de foco accesibles (en inglés): Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
:focus { outline: none; }
Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.
- Más información (en inglés): Never remove CSS outlines
Especificaciones
Specification |
---|
HTML Standard # selector-focus |
Selectors Level 4 # focus-pseudo |
Compatibilidad con navegadores
BCD tables only load in the browser