On mobile display, every pixel counts. To minimize the space required to display the search form, it is displayed in a compact form and then expand to full width on :focus. This way more space can be used for other interface elements or content area. Check out the search form on Web Designer Wall and Best Web Gallery for a live demo. When you click on the input field, it expands to full width.
On Best Web Gallery, I use jQuery to fade in the search form when the search button is clicked. I use focus() function to set the input to :focus stage so the user doesn’t have to click again.
Let’s Start: The HTML Code
Below is the sample HTML form. It uses HTML5 search input tag.
I’m not going to go through each CSS line because it is straight forward. Note that the search input width is set at 55px and it will expand to 130px on :focus stage. The transition property is the trick in making it animated. Box-shadow is used to make the glowing effect on the input.
If you need help on the border-radius or box-shadow CSS3 properties, read the "The Basics of CSS3" article.
In Demo B, the search input is further minimized – only the search icon is shown without the placeholder text. Note that I changed the padding and width property on the search input to display a perfect rounded button. I used color:transparent to make the text invisible.
It works on all major browsers such as Chrome, Firefox, Safari, and IE8+. It doesn’t work on IE7 or older because IE does not recognize search input and :focus pseudo-class is not supported.