Teoría
Teoría

La pseudoclase :focus

La pseudoclase :focus selecciona el elemento que tiene el foco en ese momento. Por ejemplo, cuando colocas el cursor en un campo de texto, ese campo recibe el foco.

Otros elementos también pueden recibir el foco. Si recorres una página con la tecla Tab, por ejemplo, el foco irá pasando por sus enlaces.

Así se usa esta pseudoclase:

input:focus {
  /* estilos para el campo que tiene el foco */
}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :focus</title> <link rel="stylesheet" href="course-5.css"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login" action="https://codigoheroe.com/echo" method="post"> <label for="academy-login">Nombre de usuario</label> <input type="text" id="academy-login" name="academy-login"> <label for="academy-password">Contraseña</label> <input type="password" id="academy-password" name="academy-password"> <input type="submit" value="Entrar"> </form> </body> </html>

CSS

form input:focus { }

ObjetivosRealizado

Resaltemos los campos que tienen el foco.

Agrega la propiedad border-color: #0088cc; a la regla de CSS con el selector form input:focus.

Coloca el cursor en cualquier campo para comprobar los selectores.