Buscador desplegable
Un botón redondo con una lupa que se abre en un campo de búsqueda completo al hacer clic.
Ajustes
Código
<label class="uv-is"><input placeholder="Buscar…"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Dónde usarlo
Un buscador desplegable ahorra sitio en cabeceras llenas. Funciona bien en un blog con mucho menú, en la barra superior de una tienda online pequeña o en la cabecera móvil de un periódico digital. En reposo es solo un botón redondo con una lupa; al pulsarlo se estira con un rebote hasta ser un campo ancho, listo para escribir.
Cuando pierde el foco vuelve a encogerse, así que encaja en webs donde buscar es una ayuda y no el camino principal. En una web de documentación o un catálogo grande, donde la gente busca todo el rato, muestra la barra entera desde el principio.