Glow on Focus Input
CSSTextfeld mit weichem, mehrschichtigem Leuchten in Fuchsia und Violett beim Fokussieren. Das Glühen lenkt die Aufmerksamkeit dezent auf das aktive Feld im dunklen Layout.
1<div class="gr-wrap">2 <label for="gr-input" class="gr-lab">Dein Name</label>3 <div class="gr-ring">4 <div class="gr-inner">5 <svg class="gr-ico" viewBox="0 0 24 24" fill="none" aria-hidden="true">6 <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.6"/>7 <path d="M4 20c0-3.3 3.6-5 8-5s8 1.7 8 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>8 </svg>9 <input id="gr-input" class="gr-input" type="text" placeholder="Max Mustermann" />10 </div>11 </div>12</div>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Minimalistisches Feld, dessen Unterstrich beim Fokus als Gradient-Linie von links nach rechts gezeichnet wird.
Premium Vue Command/Search Input mit animiertem Gradient-Ring, Floating Label, Live-Suggestions, Keyboard-Navigation, Clear-Button, Ladezustand, Statuszeile und sauberem v-model-Support. Funktioniert auch direkt in der Komponenten-Vorschau ohne externe Abhängigkeiten.