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
Ver todos: InputsDó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.