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.
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.
First of all, cool search bar and great site.
Then, as I was reading this post, I tried to select the css code aaand… I found out that it’s an image. Seriously? On a website about web design you use images to contain your code?
What’s wrong with using the search icon image?
I think Gian Luca is referring to the screenshots of the example code, not the search-icon.png.
Just clarifying a bit.
@Glen – Thanks for the clarification.
@Gian – Illustration is easy to explain what the code does. To copy the CSS code, simply view the demo page source.
I know that I can copy the code from the example ( that’s what I did!) but, as Luca said, code and pre are more elegant, provide a better user-experience (copy/paste, zoom, etc) and, you know, images should only be used for images (yeah, call me a semantics nazi if you want :) )
Again, amazing work and amazing site.
It seems Gian Luca rather have something easier to copy and paste. Copy and paste? Seriously? LOL!
You got a problem with copy and paste, Theus? I assume you never copied and pasted anything in your life as a designer, have you?
That’s just a matter of speed, actually: it’s faster to copy/paste the code in the tutorial than to open the demo, view the source, look for the CSS part and copy/paste the CSS.
As for using an image, I agree with Gian Luca: and
are way more elegant than a JPG, and you could use CSS comments to explain the code.That said, Nick, terrific work as always. ;)
This is the part of the cooment that looked weird, I should have escaped the characters:
As for using an image, I agree with Gian Luca:
<pre>and<code>are way more elegant than a JPG, and you could use CSS comments to explain the code.Nick makes a great effort to illustrate how things are done. If you look at the images, they clearly underline areas of attention in red and there’s helpful descriptions. You don’t get the same effect using code . . . .
Nick does it his way and his way rules! If you need the code, use the demo. simple.
This is just wrong, there’s the possibility of selectable code AND syntax highlighting,. For example, here: http://trigger.io/cross-platform-application-development-blog/2012/03/02/how-to-build-fast-html5-mobile-apps-using-backbone-js-zepto-js-and-trigger-io/
Emyr didn’t say anything about syntax highlighting, he was mentioning the annotations Nick added to the images.
Excellent, I’ve been looking for a way to “facy up” the search box in my site, and this along the use of the “placeholder” attribute (HTML5), will make a difference. I looked at the code and I think I can make it work in my site. Thanks.
Great post … Does it degrade gracefully for older browsers?
It simply won’t expand it to 130px. The search functionality will still work just fine. If you are worried about browser support, you can use something like Modernizr or conditional comments to add a Javascript fallback. Or, the other option is an IE only stylesheet.
I think Modernizr with
.no-csstransitions input[type="search"] {
width: 130px;
}
is the way to go.
awesome stuff Nick! If not for the responsiveness just for the safari fixes to alter the styling of the search field . Kind of off topic but when trying it out on your site to see how you implemented it I notice the subtle hover over your twitter and rss icons that shows the followers. Was wonder if you are using a plugin or if its something you put together your self and if you could possibly tutorial that as I have been having issues trying to implement something similar myself for a redesign.
I Googled the code. Try ‘wordpress twitter follower count’ and ‘rss subscriber count”.
It’s true what they say ‘It’s all in the detail’, lots of small things like this make such a big difference, helps take something from being average to the next level.
Nice tut as well, very easy to follow.
nice tutorial
Thank you so much for these helps. I’ve used both the search form above here as well as your CSS instructions for a customized search/submit button. (They’re both on my website above, if you’re so inclined.)
With that in mind, having utilized your coding, do you require a reference somewhere in a resources section on my site? Thanks.
Wow! it is really simple but very effective! Thanks for sharing this tutorial, I learned a lot from it..
Great idea!
Great, we have a new web app coming up which we are doing some mobile development for. This would be of use!
Cheers
Ben
Great idea. I’ll use this tutorial in my next designs. Thanks Nick!
wow all expertise are debating, cool:)
well I’ve been checked nick’s other site he works hardly right?:)
Love this Search Box Idea. Simple and Effective.
I’ve come across themes that had built-in search boxes but I think it is better to manually input it to the website. Thanks for sharing. Really appreciated the tutorial as well.
A nice, clean and simple search box design. Great tutorial. Thanks.
Fantastic stuff! Thanks Nick for writing up a tutorial on expanding search bar. Like it!
Search box in a website is important and effective one. It will be very useful for the mobile users where they tend to search for their needs in the site… :)
A simple straight-forward search form that is easy to implement. It should fit well in many mobile application designs.
this blog is great, thank you
Thanks for sharing good posting in your blog. I like it. Love this Search Box Idea. Simple and Effective.