CSS ile Kayan Label Yapımı vs jQuery Plugini

Bugün gezinirken şöyle bir jquery plugini gördüm;
https://www.jqueryscript.net/demo/jQuery-Floating-Placeholder-Text-Plugin-Placeholder-Label/

Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.

Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.

Kısaca şöyle bir HTML yapımız olsun;

<div class="field">
    <input type="text" required autocomplete="off" id="username" value="tayfunerbilen">
    <label for="username" title="Kullanıcı adınızı girin" data-title="Kullanıcı adı">
</div>

Ve CSS kodlarımız;

.field {
    position: relative;
    margin-bottom: 15px;
}

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
    content: attr(data-title);
}

.field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    color: blue;
    padding: 0 6px;
    left: 9px;
}

Daha fazla detay için dersi izlemeniz yeterli

Demo

“CSS ile Kayan Label Yapımı vs jQuery Plugini” için 3 yorum

  1. Eline sağlık, tek sıkıntı formdaki her input zorunlu(required) olmuyor. Onda çözüm nasıl olacak?

    1. form etiketine novalidate niteliği eklersen doğrulama yapmaz ama CSS işlemleri hala düzgün çalışmaya devam eder, sanırım bu işini çözer 🙂

Hakan için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir