: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

:focus

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.

:focus { outline: none; }

Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.

Especificaciones

Especificaci贸n Estado Comentarios
HTML Living Standard
La definici贸n de ':focus' en esta especificaci贸n.
Living Standard Define la sem谩ntica espec铆fica de HTML.
Selectors Level 4
La definici贸n de ':focus' en esta especificaci贸n.
Working Draft Ning煤n cambio.
Selectors Level 3
La definici贸n de ':focus' en esta especificaci贸n.
Recommendation Ning煤n cambio.
CSS Level 2 (Revision 1)
La definici贸n de ':focus' en esta especificaci贸n.
Recommendation Definici贸n Inicial.

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambi茅n