אפקט הזזה בעת מיקוד

שיעור 15 מתוך 19 בקורס שכפול דף הכניסה של Netflix | פרויקט Front-end של Coddy.

כפי שאפשר לראות למטה, יש תזוזה קלה של טקסט התווית לאחר לחיצה על שדות הקלט.

קטע קוד זה של CSS מעצב רכיבי טופס בהתאם למצבם באמצעות מחלקת הפסאודו :is().

.form-control input:is(:focus,:valid): בורר זה מכוון לרכיבי <input> בעלי המחלקה .form-control, שנמצאים במיקוד (:focus) או שהקלט בהם תקין (:valid). כשאחד מהתנאים האלה מתקיים, צבע הרקע מוגדר ל-#444, והריפוד מותאם ל-16px 20px 0.
.form-control input:is(:focus, :valid)~label: בורר זה מכוון לרכיבי <label> שהם אחים של רכיבי <input> שנבחרו קודם, ושמתקיימים בהם אותם תנאים: הם נמצאים במיקוד או שהקלט בהם תקין. כשאחד מהתנאים מתקיים, גודל הגופן של התווית מוגדר ל-0.75 rem, והיא מוזזת אנכית כלפי מעלה ב--130%, ככל הנראה כדי ליצור אפקט של תווית צפה מעל שדה הקלט.

אתגר

קל

השתמשו בקוד הרמז כתשובה, אבל נסו קודם בעצמכם.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>