HTML + CSSInputs
Buscador que se despliega
Un botón redondo con lupa que se estira hasta convertirse en un buscador completo al pulsarlo.
Ajustes
16px
1x
Código
<div class="uv-in2e"><input placeholder="Buscar…"><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 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
Cuando la cabecera ya va llena, un buscador que empieza siendo un icono se agradece: la barra superior de un blog, el menú de una tienda online pequeña o una web de recetas en el móvil. Pulsas la lupa y se abre; vuelves a pulsar y se cierra. Un buscador desplegable en HTML, CSS y algo de JavaScript.
Esconder la búsqueda está bien cuando es algo secundario. Si la gente entra sobre todo a buscar, como en una tienda con miles de productos, deja el campo completo visible desde el principio.