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

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si1871
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico1 ? Si461 ?

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, pekechis
Última actualización por: lajaso,