Efecto de desplazamiento en focus

Lección 15 de 19 del curso Clon de la página de inicio de sesión de Netflix | Proyecto front-end de Coddy.

Como podemos ver a continuación, hay un pequeño desplazamiento en el texto de la etiqueta después de hacer clic en los campos de entrada.

Animación que muestra el desplazamiento de la etiqueta al enfocar el input

Este código es un fragmento de CSS que aplica estilos a los controles de formulario basándose en su estado utilizando la pseudoclase :is().

.form-control input:is(:focus,:valid): Este selector se dirige a los elementos <input> con la clase .form-control que están enfocados (:focus) o que tienen una entrada válida (:valid). Cuando se cumple cualquiera de estas condiciones, el color de fondo se establece en #444 y el relleno (padding) se ajusta a 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Este selector se dirige a los elementos <label> que son hermanos de los elementos <input> seleccionados anteriormente bajo las mismas condiciones: estar enfocados o tener una entrada válida. Cuando se cumple cualquiera de las condiciones, el tamaño de fuente de la etiqueta se establece en 0.75 rem y se traslada verticalmente hacia arriba un -130%, probablemente para crear un efecto de etiqueta flotante sobre el campo de entrada.

Desafío

Fácil

Usa el código de pista como respuesta, pero primero inténtalo tú mismo.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>