← All elements
<div class="s"><input type="text" placeholder="Search elements" aria-label="Search"><span class="ic"></span></div>About this navigation bar
A round search button that grows into a full input on focus, with a smooth width transition and no script.
How it works
The wrapper is a small circle that holds a text input and a magnifier drawn with borders. The :focus-within selector changes the wrapper width when the input receives focus, and a width transition animates the growth. The placeholder text only becomes visible once the bar is open.
Ways to customise it
- Change the focus width to make the open bar longer or shorter.
- Edit the accent colour on the icon and the focus ring.
- Use :hover as well as :focus-within if you want it to open before the click.
Good to know
The input has an aria-label because there is no visible text label while it is collapsed. :focus-within is supported everywhere current. Do not hide the whole control behind hover only, because touch screens cannot hover.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.