Shift-Effekt bei Fokus

Lektion 15 von 19 im Kurs Netflix-Anmeldeseite-Klon | Front-end-Projekt von Coddy.

Wie wir unten sehen können, verschiebt sich der Label-Text nach dem Klicken auf die Eingabefelder ein wenig.

Dieser Code ist ein CSS-Snippet, das Formularsteuerelemente basierend auf ihrem Zustand mithilfe der Pseudo-Klasse :is() gestaltet.

.form-control input:is(:focus,:valid): Dieser Selektor zielt auf <input>-Elemente mit der Klasse .form-control ab, die entweder im Fokus (:focus) stehen oder eine gültige Eingabe (:valid) haben. Wenn eine dieser Bedingungen erfüllt ist, wird die Hintergrundfarbe auf #444 gesetzt und das Padding auf 16px 20px 0 angepasst.
.form-control input:is(:focus, :valid)~label: Dieser Selektor zielt auf <label>-Elemente ab, die Geschwisterelemente der zuvor ausgewählten <input>-Elemente unter denselben Bedingungen sind: entweder im Fokus oder mit gültiger Eingabe. Wenn eine der Bedingungen erfüllt ist, wird die Schriftgröße des Labels auf 0.75 rem gesetzt und es wird vertikal um -130% nach oben verschoben, wahrscheinlich um einen Floating-Label-Effekt über dem Eingabefeld zu erzeugen.

Aufgabe

Einfach

Verwenden Sie den Hinweis-Code als Antwort, aber versuchen Sie es zuerst selbst.

Probier es selbst

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