Efectos de focus

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 9 de 43.

La pseudoclase :focus te permite dar estilo a un elemento cuando recibe el foco, como cuando haces clic en él o te desplazas por él usando el teclado. ¡Es una excelente manera de resaltar el elemento con el que estás interactuando! Por ejemplo:

<input type="text">

Aplica estilo al input cuando obtiene el foco:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Cuando el usuario hace clic o se desplaza con el tabulador a este campo de entrada, el borde cambiará de color a azul y aparecerá una sutil sombra azul a su alrededor.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS que aplique un estilo especial a una entrada de texto cuando reciba el foco.

Cuando esté enfocado, cambia el borde a naranja rgb(255, 152, 0)
Cuando esté enfocado, añade un color de fondo amarillo rgb(255, 243, 224)

Hoja de referencia

La pseudo-clase :focus aplica estilos a un elemento cuando recibe el foco (al hacer clic o desplazarse con el tabulador):

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Esto cambia el color del borde y añade una sombra cuando el input tiene el foco.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.