HTML + CSSChamps
Recherche qui se déploie
Un bouton rond avec une loupe qui s’étire en véritable champ de recherche quand on clique dessus.
Réglages
16px
1x
Code
<div class="uv-in2e"><input placeholder="Rechercher…"><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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Où l’utiliser
Quand l’en-tête est déjà chargé, une recherche qui commence par une icône soulage : la barre du haut d’un blog, le menu d’une petite boutique en ligne ou un site de recettes sur mobile. Un clic sur la loupe l’ouvre, un second le referme. Une barre de recherche extensible en HTML, CSS et un soupçon de JavaScript.
Cacher la recherche convient quand elle reste secondaire. Si vos visiteurs viennent surtout pour chercher, comme dans une boutique aux milliers de produits, laissez le champ complet visible dès le départ.