HTML + CSSInputs
Pop-open search
A round magnifier button that stretches into a full search field when you click it.
Settings
16px
1x
Code
<div class="uv-in2e"><input placeholder="Search…"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
When the header is already crowded, a search that starts as an icon is a relief: the top bar of a blog, the menu of a small online shop or a recipe site on mobile. Click the magnifier and it opens, cursor ready; click again and it closes. An expanding search bar in HTML, CSS and a pinch of JavaScript.
Hidden search is fine when search is a side feature. If people come to your site mainly to look things up, like a shop with thousands of products, keep the full field visible from the start.