Canlı Önizleme
Nasıl Kullanılır?
':not(:placeholder-shown)' CSS seçicisi input dolu olduğunda label'ı yukarı taşır. placeholder=" " (boşluk bırakılmış) olmak zorunda — yoksa seçici çalışmaz.
Kaynak Kodlar
HTML
<div class="neon-field">
<input class="neon-input" type="text" id="neonInput" placeholder=" " required>
<label class="neon-label" for="neonInput">E-posta</label>
<div class="neon-border"></div>
</div>CSS
.neon-field {
position: relative; width: 300px; font-family: 'Inter', sans-serif; padding-top: 20px;
}
.neon-input {
width: 100%; box-sizing: border-box; padding: 14px 16px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px; color: #fff; font-size: 16px; outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.neon-input:focus {
border-color: transparent;
box-shadow: 0 0 0 2px #6C5CE7, 0 0 20px rgba(108,92,231,0.4), 0 0 40px rgba(108,92,231,0.2);
}
.neon-label {
position: absolute; left: 16px; top: 34px;
color: #a0a0b0; pointer-events: none; transition: 0.3s; font-size: 16px;
background: transparent; padding: 0 4px;
}
.neon-input:focus ~ .neon-label, .neon-input:not(:placeholder-shown) ~ .neon-label {
top: 4px; font-size: 12px; color: #6C5CE7;
background: linear-gradient(to bottom, transparent 40%, #0d0f1a 40%);
}
.neon-border {
position: absolute; bottom: 0; left: 8%; width: 0; height: 2px;
background: linear-gradient(90deg, #6C5CE7, #00cec9, #6C5CE7);
border-radius: 2px; transition: width 0.4s ease;
}
.neon-input:focus ~ .neon-border { width: 84%; }