Previously I wrote a tutorial on mobile navigation, today I'm going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form.

View Demo Search Form

The Purpose

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.

<form>
	<input type="search" placeholder="Search">
</form>

Reseting The Default Webkit Search Input

By default, Webkit browsers style the search input like the screenshot shown below:

To remove the default style so it looks like a regular text field, add the following CSS:

input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none;
}

Styling The Search Input (view demo)

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.

Example B (view demo)

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.

Browser Compitability

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.