Nerede Hata Yapıyorum Acaba?

Sorun Çözüldü, Çözüm aşağıda.

Buradaki kodları kullanarak form yapmaya çalışıyorum, takıldığım konu ise input içerisinde bir şey yazıldığında label'ın tekrar eski yerine gelmiyor olması. Yani formu seçince içerisindeki label:focus sayesinde yukarı çıkıyor da formu bırakınca geri geliyor ya, işte form içerisine bir şey yazıca gelmiyor. Gelmemesi için ne yapmışlar çözemedim? Hatta bir değer girince yazı mavi oluyor.

Demo: https://codepen.io/alphardex/pen/zYYZorR

Çözüm:

Hocam ben mi yanlış anladım acaba inputun içi dolu olduğu için label'ın geri gelmemesi daha mantıklı değil mi?

hocam sanırım ek olarak https://cdn.jsdelivr.net/gh/alpharde...t/aqua.min.css kütüphaneyi çağırıyorlar. bu kütüphane içerisinde ilgili tanımlamalar mevcut. Sağ üst taraftan settings butonuna tıklayıp ek olarak tanımlı olan kütüphaneleri görebilirsiniz.

Geri gelince yazı olduğu için üstüne geliyor hocam. Yazılar üst üste biniyor. Şöyle oluyor:

Olması gereken şu:

Evet hocam buldum hatta şöyle görünüyor: :not(laceholder-shown)~label ancak bunu uyguladığımda bende sürekli bir veri form içerisinde varmış gibi aktif oluyor.

hocam bu iki kod sayesinde yapılıyor gibi görünüyor.

.form-input-material .form-control-material:focus ~ label,
.form-input-material .form-control-material:not(laceholder-shown) ~ label {
transform: translateY(-120%) scale(0.75);
}

Ben bunu kullandığımda nedense sürekli aktif kalıyor. Sayfa yüklendiği gibi açık bende, örnekte form içerisinde veri olunca aktif oluyor.

Sorun çözüldü, ben yukarıya çıkması için margin-top kullanıyordum -px değeri vererek, bu yüzden olmuyormuş. Yerine örnekteki gibi zoom olmadan yani scale olmadan transform: translateY(-120px); verdim oldu.