HTML + CSSEingabefelder
Aufklappende Suche
Ein runder Lupen-Button, der sich beim Anklicken zu einem vollen Suchfeld auseinanderzieht.
Einstellungen
16px
1x
Code
<div class="uv-in2e"><input placeholder="Suchen …"><button class="bt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg></button></div>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
Wenn der Header schon voll ist, tut eine Suche gut, die als Icon beginnt: die obere Leiste eines Blogs, das Menü eines kleinen Onlineshops oder eine Rezeptseite auf dem Handy. Ein Klick auf die Lupe öffnet das Feld mit blinkendem Cursor, ein zweiter schließt und leert es. Eine ausklappbare Suchleiste in HTML, CSS und etwas JavaScript.
Eine versteckte Suche ist okay, wenn Suchen Nebensache ist. Kommen die Leute vor allem zum Suchen, etwa in einem Shop mit Tausenden Produkten, zeig das volle Feld von Anfang an.