Effetto di spostamento al focus

Lezione 15 di 19 del corso Clone della pagina di accesso a Netflix | Progetto front-end di Coddy.

Come possiamo vedere qui sotto, dopo aver fatto clic sui campi di input il testo dell'etichetta si sposta leggermente.

Questo codice è uno snippet CSS che definisce lo stile dei controlli del modulo in base al loro stato, utilizzando la pseudo-classe :is().

.form-control input:is(:focus,:valid): questo selettore individua gli elementi <input> con la classe .form-control che sono attivi (:focus) o contengono un input valido (:valid). Quando si verifica una delle due condizioni, il colore di sfondo viene impostato su #444 e il padding viene regolato su 16px 20px 0.
.form-control input:is(:focus, :valid)~label: questo selettore individua gli elementi <label> fratelli dei precedenti elementi <input> che soddisfano le stesse condizioni: essere attivi o contenere un input valido. Quando si verifica una delle due condizioni, la dimensione del carattere dell'etichetta viene impostata su 0.75 rem e l'etichetta viene spostata verticalmente verso l'alto di -130%, probabilmente per creare un effetto di etichetta fluttuante sopra il campo di input.

Sfida

Facile

Usa il codice del suggerimento come risposta, ma prima prova a risolverlo da solo.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>