Efek pergeseran saat fokus

Pelajaran 15 dari 19 dalam kursus Klon Halaman Masuk Netflix | Proyek Front-end di Coddy.

Seperti yang bisa kita lihat di bawah, teks label sedikit bergeser setelah kamu mengeklik kolom input.

Cuplikan CSS ini memberi gaya pada kontrol formulir berdasarkan kondisinya menggunakan pseudo-class :is().

.form-control input:is(:focus,:valid): Selector ini menargetkan elemen <input> dengan class .form-control yang sedang fokus (:focus) atau memiliki input yang valid (:valid). Jika salah satu kondisi ini terpenuhi, warna latar diatur ke #444, dan padding disesuaikan menjadi 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Selector ini menargetkan elemen <label> yang merupakan sibling dari elemen <input> yang dipilih sebelumnya dengan kondisi yang sama, yaitu sedang fokus atau memiliki input yang valid. Jika salah satu kondisi terpenuhi, ukuran font label diatur ke 0.75 rem, dan label digeser secara vertikal ke atas sebesar -130%, kemungkinan untuk menciptakan efek label mengambang di atas kolom input.

Tantangan

Mudah

Gunakan kode petunjuk sebagai jawaban, tetapi coba kerjakan sendiri terlebih dahulu.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>