Label mengambang adalah UI formulir masukan modern dan hemat ruang yang biasa digunakan dalam Desain Material dan aplikasi lainnya.
Hemat Ruang: Berfungsi ganda sebagai label dan placeholder, menghemat ruang vertikal bahkan ketika ruang layar terbatas.
Klarifikasi konten masukan: Pengguna selalu diperlihatkan arti suatu bidang (label), baik saat maupun setelah mengetik, sehingga pengguna tidak akan bingung.
Interaksi Canggih: Animasi label yang dimunculkan dengan mulus pada fokus memberikan umpan balik visual yang efektif kepada pengguna bahwa masukan kini tersedia.
Peretasan Placeholder: Memanfaatkan kelas semu :placeholder-shown\ untuk menentukan status (dimasukkan atau tidak) hanya menggunakan CSS, tanpa menggunakan JavaScript apa pun. (* placeholder=" "\ di sisi HTML adalah persyaratan wajib)
Memastikan visibilitas: Saat label dinaikkan, visibilitas dipertahankan dengan mengurangi ukuran font (scale(0.75)\) dan menerapkan font tebal (font-weight: 500\) dan warna tema.
Aksesibilitas: Dengan menghubungkan atribut label\ pada elemen for\ dan input\ pada elemen id\, ini mendukung pembaca layar dan pergerakan fokus saat mengklik label. Selain itu, pointer-events: none\ ditentukan agar label tidak mengganggu pengoperasian.
Anda dapat menyesuaikan poin-poin berikut agar sesuai dengan sistem desain proyek Anda.
Pewarnaan: Ubah warna .fli-input:focus\ dan .fli-input:focus ~ .fli-label\ (saat ini #6366f1\) menjadi warna merek.
Sudut dan bayangan membulat: Dengan mengubah border-radius\ dan box-shadow\ dari .fli-input\, Anda dapat menyesuaikan ke desain yang lebih datar atau desain yang lebih bulat dan menonjol.
Ukuran font: Jika Anda menyesuaikan ukuran font atau tingkat pengurangan (scale(0.75)\) label, harap sesuaikan juga padding\ (terutama nilai atas) dari .fli-input\ sehingga label dan teks masukan tidak tumpang tindih.
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">nama pengguna</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;
}
/* Memasukkan atau menyelesaikan status */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Tidak fokus tapi masih input */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome: versi terbaru
Safari: versi terbaru
Firefox: versi terbaru
Tepi: Versi terbaru
Kelas semu :placeholder-shown\ didukung oleh semua browser modern dan aman untuk digunakan.