: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