Kayan etiketler, Materyal Tasarımı ve diğer uygulamalarda yaygın olarak kullanılan modern, yerden tasarruf sağlayan bir giriş formu kullanıcı arayüzüdür.
Yerden Tasarruf: Etiket ve yer tutucu olarak da kullanılabilir; ekran alanı sınırlı olduğunda bile dikey alandan tasarruf sağlar.
Giriş içeriğinin açıklığa kavuşturulması: Kullanıcılara hem yazma sırasında hem de yazma sonrasında bir alanın ne anlama geldiği (etiket) her zaman gösterilir, böylece kullanıcıların kafası asla karışmaz.
Gelişmiş Etkileşimler: Odaktaki etiketin düzgün bir şekilde yükseltilmiş animasyonu, kullanıcıya girdinin artık mevcut olduğuna dair etkili görsel geri bildirim sağlar.
Yer tutucu saldırısı: Herhangi bir JavaScript kullanmadan, yalnızca CSS kullanarak durumu (girdi veya değil) belirlemek için :placeholder-shown sözde sınıfını kullanır. (* HTML tarafında placeholder=" " zorunlu bir gerekliliktir)
Görünürlüğün sağlanması: Etiket yükseltildiğinde, yazı tipi boyutu azaltılarak (“scale(0,75)”) ve kalın yazı tipi (“font-weight: 500”) ve tema rengi uygulanarak görünürlük korunur.
Erişilebilirlik: “label” öğesinin “for” özelliğini ve “input” öğesinin “id”sini bağlayarak, etiket tıklandığında ekran okuyucuları ve odak hareketini destekler. Ayrıca, etiketin işlemi engellememesi için ‘pointer-events: none’ belirtildi.
Aşağıdaki noktaları projenizin tasarım sistemine uyacak şekilde ayarlayabilirsiniz.
Renklendirme: .fli-input:focus ve .fli-input:focus ~ .fli-label (şu anda #6366f1) rengini marka rengiyle değiştirin.
Yuvarlatılmış köşeler ve gölgeler: .fli-input'un border-radius’unu ve `box-shadow’unu değiştirerek, daha düz bir tasarıma veya daha yuvarlak ve popüler bir tasarıma ayarlayabilirsiniz.
Yazı tipi boyutu: Etiketin yazı tipi boyutunu veya küçültme oranını (“ölçek(0,75)”) ayarlarsanız, lütfen etiket ve giriş metninin çakışmaması için “.fli-input”un “dolgusuna” (özellikle üst değere) ince ayar yapın.
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">kullanıcı adı</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* Giriliyor veya tamamlandı durumu */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Odak dışı ama yine de giriş */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome: en son sürüm
Safari: en son sürüm
Firefox: en son sürüm
Kenar: En son sürüm
:placeholder-shown sözde sınıfı tüm modern tarayıcılar tarafından desteklenir ve kullanımı güvenlidir.