Canlı Önizleme
Nasıl Kullanılır?
Gerçek kullanımda kapsayıcı div'inizin arkaplanı ile label css'indeki '--bg-color' i aynı renk ayarlamayı unutmayın.
Kaynak Kodlar
HTML
<div class="floating-input-group">
<input type="email" class="float-in" required>
<label class="float-lbl">E-posta Adresiniz</label>
</div>CSS
.floating-input-group { position: relative; margin: 20px 0; font-family: 'Inter', sans-serif; width: 300px; }
.float-in { width: 100%; box-sizing: border-box; padding: 15px; border: 2px solid #383846; border-radius: 8px; background: transparent; color: #fff; font-size: 16px; outline: none; transition: 0.3s; }
.float-lbl { position: absolute; left: 15px; top: 15px; color: #a0a0b0; pointer-events: none; transition: 0.3s; background: var(--bg-color, #1a1a24); padding: 0 5px; font-size: 16px; }
.float-in:focus { border-color: #6C5CE7; }
.float-in:focus ~ .float-lbl, .float-in:valid ~ .float-lbl { top: -10px; font-size: 13px; color: #6C5CE7; }