Focus Durumunda Kayma Efekti

Coddy'nin Netflix Giriş Sayfası Klonu | Front-end projesi kursunda ders 15 / 19.

Aşağıda görebileceğimiz gibi, giriş alanlarına tıkladıktan sonra etiket metninde biraz kayma oluyor.

Bu kod, :is() sözde sınıfını (pseudo-class) kullanarak form kontrollerini durumlarına göre stillendiren bir CSS parçacığıdır.

.form-control input:is(:focus,:valid): Bu seçici, odaklanmış (:focus) veya geçerli girişe (:valid) sahip olan .form-control sınıfındaki <input> öğelerini hedefler. Bu koşullardan herhangi biri karşılandığında, arka plan rengi #444 olarak ayarlanır ve dolgu (padding) 16px 20px 0 şeklinde düzenlenir.
.form-control input:is(:focus, :valid)~label: Bu seçici, aynı koşullara sahip (odaklanmış veya geçerli girişi olan) daha önce seçilen <input> öğelerinin kardeşi olan <label> öğelerini hedefler. Her iki koşuldan biri karşılandığında, etiketin yazı tipi boyutu 0.75 rem olarak ayarlanır ve muhtemelen giriş alanının üzerinde yüzen bir etiket efekti oluşturmak için dikey olarak yukarı doğru -130% oranında kaydırılır.

Görev

Kolay

İpucu kodunu cevap olarak kullanın, ancak önce kendiniz deneyin.

Kendin dene

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