Eingabe mit Linie aus der Mitte
Nur eine feine Linie unter dem Text; beim Fokus öffnet sich aus der Mitte eine Linie mit Verlauf.
Einstellungen
Code
<label class="uv-in2u"><input placeholder="Name"><i></i></label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Kein Kasten, kein Hintergrund, nur eine Linie. Dieser reduzierte Look passt zu Seiten, auf denen das Design spricht: das Kontaktformular im Portfolio einer Fotografin, das Newsletter-Feld eines Online-Magazins oder die Zusage-Seite einer Hochzeit. Die Linie, die sich aus der Mitte öffnet, zeigt den Fokus klar. Eine Input-Animation mit Unterstrich in CSS.
Die Linie im Ruhezustand ist sehr hell. Prüf sie auf deinem echten Hintergrund, bei blassen Farben musst du sie eventuell abdunkeln. Mit zwei, drei Feldern wirkt das toll, bei langen Formularen sind Kästen übersichtlicher.