Resumen

La  pseudo-class :focus CSS se aplica cuando un elemento recibo el foco, o bien por que el usuario lo ha seleccionado mediante el uso del teclado o bien mediante el ratón (por ejemplo un campo input de un formulario).

Síntaxis

element:focus { ... }

Ejemplos

.first-name:focus {
  color: red;
}

.last-name:focus {
  color: lime;
}
<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':focus' en esta especificación.
Living Standard Define semántica específica HTML.
Selectors Level 4
La definición de ':focus' en esta especificación.
Working Draft Sin cambio
Selectors Level 3
La definición de ':focus' en esta especificación.
Recommendation Sin cambio
CSS Level 2 (Revision 1)
La definición de ':focus' en esta especificación.
Recommendation Definición Inicial

Compatibilidad con los diferentes navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 1.0 (1.7 o anterior) 8.0 7.0 1.0
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 1.0 1.0 (1) 8.0 6.0 1.0

Etiquetas y colaboradores del documento

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