Effet de décalage au focus

Leçon 15 sur 19 du cours Clone de la page de connexion Netflix | Projet Front-end de Coddy.

Comme nous pouvons le voir ci-dessous, il y a un léger décalage dans le texte de l'étiquette après avoir cliqué sur les champs de saisie.

Ce code est un extrait CSS qui stylise les contrôles de formulaire en fonction de leur état à l'aide de la pseudo-classe :is().

.form-control input:is(:focus,:valid): Ce sélecteur cible les éléments <input> avec la classe .form-control qui sont soit focalisés (:focus), soit ont une saisie valide (:valid). Lorsque l'une de ces conditions est remplie, la couleur d'arrière-plan est définie sur #444, et le padding est ajusté à 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Ce sélecteur cible les éléments <label> qui sont des frères des éléments <input> précédemment sélectionnés avec les mêmes conditions : soit focalisés, soit ayant une saisie valide. Lorsque l'une ou l'autre condition est remplie, la taille de la police de l'étiquette est définie sur 0.75 rem, et elle est déplacée verticalement vers le haut de -130%, probablement pour créer un effet d'étiquette flottante au-dessus du champ de saisie.

Défi

Facile

Utilisez le code d'indice comme réponse, mais essayez d'abord par vous-même.

Essayez vous-même

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