Efekt przesunięcia przy fokusie

Lekcja 15 z 19 w kursie Klon strony logowania Netflix | Projekt front-endowy w Coddy.

Jak widać poniżej, po kliknięciu pól wejściowych tekst etykiety nieco się przesuwa.

Ten fragment kodu CSS stylizuje kontrolki formularza na podstawie ich stanu, używając pseudoklasy :is().

.form-control input:is(:focus,:valid): Ten selektor wybiera elementy <input> z klasą .form-control, które są aktywne (:focus) lub zawierają prawidłowe dane wejściowe (:valid). Gdy spełniony jest którykolwiek z tych warunków, kolor tła jest ustawiany na #444, a dopełnienie na 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Ten selektor wybiera elementy <label>, które są rodzeństwem wcześniej wybranych elementów <input> spełniających te same warunki: są aktywne lub zawierają prawidłowe dane wejściowe. Gdy spełniony jest którykolwiek z warunków, rozmiar czcionki etykiety jest ustawiany na 0.75 rem, a etykieta jest przesuwana pionowo w górę o -130%, prawdopodobnie po to, by uzyskać efekt unoszącej się etykiety nad polem wejściowym.

Wyzwanie

Łatwy

Użyj kodu podpowiedzi jako odpowiedzi, ale najpierw spróbuj samodzielnie.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>