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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 8Opera Soporte completo 7Safari Soporte completo 1WebView Android Soporte completo 1Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 6Safari iOS Soporte completo 1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

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