Pseudo-clase :focus de CSS

Definición y uso

CSS :focus Los pseudo-clases se utilizan para seleccionar y configurar el estilo de los elementos que obtienen el foco.

Ejemplo

Ejemplo 1

Elije y configura el estilo del campo de entrada cuando obtiene el foco:

input:focus {
  color_fondo: amarillo;
}

Prueba por ti mismo

Ejemplo 2

Al obtener el campo de entrada en foco, cambia el color de fondo y el ancho:

input:focus {
  color_fondo: amarillo;
  ancho: 250px;
}

Prueba por ti mismo

Sintaxis CSS

:focus {
  declaraciones css;
}

Detalles técnicos

Versión: CSS2

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente este pseudo-clase.

Chrome Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

Páginas relacionadas

Tutoriales:Pseudoclases CSS