How to create a cool and usable CSS3 search box

February 18, 2011 by Catalin Rosu - 85 comments

In this new article, you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute. For the browsers that don’t support this new HTML5 attribute, a fallback is created using Modernizr’s feature detection.

View demo

Structure

The form element is used as the wrapper, while the two inputs are used as search field and search button respectively.

The HTML code

<form id="searchbox" action="">
    <input id="search" type="text" placeholder="Type here">
    <input id="submit" type="submit" value="Search">
</form>

You may notice the placeholder attribute, but just ignore it for now, as we will talk later about it.

The reason why there are so many id’s (instead of CSS3 advanced selectors as input[type="text"] or input[type="submit"]) is because I wanted this to degrade gracefully for older browsers.

The CSS

Form wrapper

#searchbox
{
	background: #eaf8fc;
	background-image: -moz-linear-gradient(#fff, #d4e8ec);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
	
	-moz-border-radius: 35px;
	border-radius: 35px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #c4d9df #a4c3ca #83afb7;            
	width: 500px;
	height: 35px;
	padding: 10px;
	margin: 100px auto 50px;
	overflow: hidden; /* Clear floats */
}

Below you can see the current result:

Inputs

Quick tip:

When adding float: left to an element, there’s no need to add also display: block. The last one it’s implied.

#search, #submit
{
	float: left;
}

#search
{
	padding: 5px 9px;
	height: 23px;
	width: 380px;
	border: 1px solid #a4c3ca;
	font: normal 13px 'trebuchet MS', arial, helvetica;
	background: #f1f1f1;
	
	-moz-border-radius: 50px 3px 3px 50px;
	 border-radius: 50px 3px 3px 50px;
	 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
	 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}

/* ----------------------- */

#submit
{		
	background: #6cbb6b;
	background-image: -moz-linear-gradient(#95d788, #6cbb6b);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
	
	-moz-border-radius: 3px 50px 50px 3px;
	border-radius: 3px 50px 50px 3px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #7eba7c #578e57 #447d43;
	
	 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   		

	height: 35px;
	margin: 0 0 0 10px;
        padding: 0;
	width: 90px;
	cursor: pointer;
	font: bold 14px Arial, Helvetica;
	color: #23441e;
	
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{		
	background: #95d788;
	background-image: -moz-linear-gradient(#6cbb6b, #95d788);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}	

#submit:active
{		
	background: #95d788;
	outline: none;
   
	 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
}

#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}

HTML5 placeholder attribute

This new HTML5 attribute shows a text in a field as long as the field is empty and not focused, then hides the text. You surely have seen this technique before with JavaScript!

Browser support:

Firefox 3.7+
Safari 4.0+
Chrome 4.0+
Opera 11+
IE10+

Opera 11 supports it, but you cannot style it (yet). As for the others above, here’s how you can style it:

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}  

#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}

Fallback support

For web browsers that are not supporting the this new HTML5 attribute, I made a fallback.

I used Modernizr to detect native support for the HTML5 placeholder attribute. Even if this could have been done by writing a short function, I love Modernizr as it also enables you to use more semantic elements from the HTML5 specs.

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

$(document).ready(function() {           
	if (!Modernizr.input.placeholder)
	{		
		var placeholderText = $('#search').attr('placeholder');
		
		$('#search').attr('value',placeholderText);
		$('#search').addClass('placeholder');
		
		$('#search').focus(function() {				
			if( ($('#search').val() == placeholderText) )
			{
				$('#search').attr('value','');
				$('#search').removeClass('placeholder');
			}
		});
		
		$('#search').blur(function() {				
			if ( ($('#search').val() == placeholderText) || (($('#search').val() == '')) )                      
			{	
				$('#search').addClass('placeholder');					  
				$('#search').attr('value',placeholderText);
			}
		});
	}                
});

View demo

Chrome’s inset box-shadow bug

There is a bug on Chrome when both border-radius and inset box-shadow are used. Anyway, there is good news about that. Paul Irish announced last month that Chrome’s inset box-shadow bug is fixed.

Later update

The demo was updated, thanks for pointing this out Atul.

So, if you’re using Chrome beta 10.0.648.119 or a greater version, this should work just perfect!

Conclusion

This example it’s mostly about progressive enhancement.

Regarding the CSS, as you will notice, this example will degrade gracefully for other old browsers. Now, regarding the HTML5 placeholder attribute, if native support is missing, then the Javascript code will do it for you.

If you enjoyed this article, get updates via RSS or email (it's free).

85 thoughts on “How to create a cool and usable CSS3 search box”

Jamie on February 23, 2011 at 17:03 said:

Great write-up Catalin! Would love to see a screenshot in IE as well, to see how passable it is for production.
Reply ↓
- Red on February 23, 2011 at 17:14 said:
  
  Thank you Jamie, you can try it with IEtester or Browsershots.
  As I wrote above, it degrades gracefully :)
  Reply ↓
  - Aix on February 27, 2013 at 03:38 said:
    
    sir can ask a favor you make the search bar but can you add how to add a search profile like something i wanna search like that how to do that? i do not have any clue thou >.<
    Reply ↓
Jamie on February 23, 2011 at 19:13 said:

Shame on you wanting me turn on the old rusty Dell precision :)
Here’s a browsershots link for anyone else who may be curious: http://browsershots.org/http://www.red-team-design.com/wp-content/uploads/2011/02/css3-search-box.html#
Reply ↓
Russ on February 25, 2011 at 21:51 said:

I’m sure you’re not over-focused on iOS Webkit since it has spotty CSS3 support, but this had some oddness on my iPad that I figured I’d share. I put a couple screenshots here: http://imgur.com/a/mxSYq Looks like the same sort of bug that Chrome has.
-Russ
Reply ↓
Red on February 26, 2011 at 00:26 said:

Russ, thanks for sharing the iPad screenshots. Indeed, seems to be the same rendering bug.
Reply ↓
Atul on February 28, 2011 at 03:19 said:

Thanks for the excellent write-up, Catalin. I guess the Chrome’s inset box-shadow bug is back in version 10.0.648.119 beta
Reply ↓
- Red on February 28, 2011 at 21:52 said:
  
  Thanks for your comment Atul!
  I made some “investigations” and I updated the article. Now the example is working also on Chrome beta 10.0.648.119.
  Good remark!
  Reply ↓
skilleo on March 27, 2011 at 21:41 said:

y u no write better js?
Reply ↓
- Red on March 30, 2011 at 11:54 said:
  
  Skilleo, I’m aware I need to improve my Javascript skills but this article isn’t about how to write optimized JS code.
  Thanks for your comment! ;)
  Reply ↓
jackiller on March 30, 2011 at 08:54 said:

nice article I love css3 and html5 somuch so perfect.
Reply ↓
- Red on March 30, 2011 at 11:49 said:
  
  Thank you @jackiller!
  As you probably noticed reading my articles, I’m also a big CSS3 fan.
  Reply ↓
Dimitry on April 1, 2011 at 15:41 said:

Thank you for sharing this nice technique!
Catalin, can I translate this article into Russian and post in on the Russian collective IT-blog with the link to original?
PS. By the way, hello from Chisinau, Moldova :)
Reply ↓
- Red on April 1, 2011 at 15:48 said:
  
  Hey Dimitry, nice to hear you enjoyed this article!
  To answer to your question: yeah, why not, as long you provide a link back…
  Reply ↓
  - Dimitry on April 1, 2011 at 16:36 said:
    
    Mulţumesc frumos :)
    Reply ↓
Paul on April 19, 2011 at 04:13 said:

I have read quite a few tutorials about form coding and nothing comes closer to this one. Great job! Will definitely implement it on my projects.
Reply ↓
- Red on April 19, 2011 at 09:25 said:
  
  Thank you Paul, it is very nice to hear that!
  Reply ↓
Jake Thompson on April 21, 2011 at 04:14 said:

I was wondering if you could show me how to implement Google CSE into this? Please oh please, this will answer all my coding nightmares!!
(:
Reply ↓
- Red on April 21, 2011 at 09:35 said:
  
  Jake, you should encounter no problems when implementing this search for your Google custom search.
  In order to do that, you just need to replace/update some ID’s and classes and that should do it.
  If you still need some help, just send me an email.
  Thanks for your comment!
  Reply ↓
David on July 21, 2011 at 20:03 said:

Hey,
just wanted to say thanks for this super easy to follow tutorial. Really impressed with your helpful explanations covering all the bases (this is just what I need right now).
Thank you!
Reply ↓
- Red on July 21, 2011 at 20:06 said:
  
  Thanks David. It’s nice to hear you found it useful!
  Reply ↓
Moogie on August 1, 2011 at 04:46 said:

I wanted to ask, is this search bar fully functional? I was wondering if I need to create a separate page like the contact form tutorial you gave. So yeah, hope you reply soon!
Reply ↓
- Red on August 1, 2011 at 10:50 said:
  
  The above search box isn’t functional, is just CSS3. For example you could integrate it further with something like Google custom search.
  Reply ↓
  - Moogie on August 1, 2011 at 11:10 said:
    
    But if I didn’t want to use the Google CSE, how do I make it work myself? I know the action=”" is suppose to lead to somewhere… but where? And even if i know where it leads to, what sort of script (maybe php script?) am I supposed to put on the page it leads to? :/
    Reply ↓
    - Red on August 1, 2011 at 11:20 said:
      
      Moogie, if you want to create your own search then you should use a search.php for example, where you must make some queries to your database to return the results. To find out more, just google for php search tuts.
      Good luck!
      Reply ↓
Mizunga on August 9, 2011 at 18:41 said:

Thanks a lot, really the best styled searchform I find, I put it on my website.
Again thanks, and keep with those great tutorials.
Reply ↓
- Red on August 9, 2011 at 18:43 said:
  
  Thanks, nice to hear that!
  Reply ↓
rick on August 13, 2011 at 17:53 said:

thanks man!. U´ve done a terrible art work
Reply ↓
- rick on August 13, 2011 at 17:56 said:
  
  ah i´ve forgot it. the sintax for the webkit has changed. i used
  background-image: -webkit-linear-gradient(#fff, #d4e8ec); insted of
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff)); and it worked perfect. of course just whit new browsers jeje.
  Reply ↓
- Red on August 13, 2011 at 22:02 said:
  
  Nice to hear you found it useful! Thanks ;)
  Reply ↓
ronald on August 21, 2011 at 21:58 said:

Go to google and download
border-radius.htc
then add this line in the css
behavior: url(border-radius.htc);
the roundness will be fixed.. in all.. browsers.. even Internet explorer 5..
Otherwise.. thank you.
Reply ↓
Animesh Kumar on October 1, 2011 at 23:56 said:

Just an incredible job..
Your tutorials are really really very nice and easy to follow..
Your website has turned out to be a very good recourse finding place for new and aspiring web-designers like us..
Thank you, thankyou very much…
Reply ↓
bird on October 4, 2011 at 04:56 said:

Hi,When I study your demo,I have some problems.In your css3-search-box.html,I found that “html,body{height:100%}”,so I was confuse about the height of 100% ,could you give me a hand?
Reply ↓
- Red on October 4, 2011 at 09:26 said:
  
  Bird, just forget about that! I will remove that extra rule I forgot there…
  Thanks for the heads up!
  Reply ↓
ahmad najiullah on October 27, 2011 at 07:24 said:

very nice and easy to follow…
i hope you can give more tutorial about html5.
you are the best….
^_^
Reply ↓
- Red on October 28, 2011 at 09:25 said:
  
  Thanks ahmad, I’m glad you found it useful and easy to follow.
  Reply ↓
  - ahmad najiullah on October 29, 2011 at 15:16 said:
    
    how to join this script for adsense for search?
    can you help me Red?
    -_-
    Reply ↓
    - Red on October 30, 2011 at 10:07 said:
      
      Ahmad, it’s not complicated. Just apply the Google adsense custom inputs to the above form.
      In the end, you need to have a form which contains a text input and also a submit input.
      Reply ↓
      - ahmad najiullah on October 30, 2011 at 10:33 said:
        
        ok, I will try. I’ll report back if it worked …
        ^_^
Tanveer on November 2, 2011 at 12:59 said:

Thnx for share wndrful technolgy, kinldy help me in this context to set this search box on the left cornr of the page.
Reply ↓
- Red on November 2, 2011 at 13:47 said:
  
  Thanks Tanveer. To left-align it, just add float:left to the #searchbox in your CSS.
  Reply ↓
Tanveer on November 3, 2011 at 10:18 said:

Thax but, i want to use same technology in ASP.Net where i want to use Asp:button and text box insted html input there i m getting problem, i shall be thankfull to you if you suggest me that how can i use them in Asp.Net
Reply ↓
- Red on November 3, 2011 at 10:31 said:
  
  I’m afraid I can’t help you regarding ASP.NET
  Reply ↓
Tanveer on November 3, 2011 at 10:45 said:

Thax for the quick reply, i solved the problem. and working in asp.net
Reply ↓
- Red on November 3, 2011 at 10:49 said:
  
  Nice to hear that ;)
  Reply ↓
Hugh Bellamy on December 3, 2011 at 12:33 said:

Hello, whenever I change the height, everything is no longer centered nicely.. I am changing the height to 26px, but the actual search input is no longer in the middle. What must i do?
Thanks.
Reply ↓
- Red on December 3, 2011 at 12:45 said:
  
  Hugh, when you change the #searchbox‘s height, change it also for the input type="text" and input type="submit".
  Reply ↓
  - Hugh Bellamy on December 3, 2011 at 12:53 said:
    
    Thanks a lot! By the way, I have set my margin-top property to 0, but it still doesn’t go to the top of the screen, why is that? Thanks.
    Basically, I have tried to set the margin-top property of the form to 0, but it still isn’t at the absolute top. Thanks again!
    Reply ↓
    - Red on December 3, 2011 at 13:14 said:
      
      Perhaps you need to clear margin for the body wrapper: body {margin: 0}
      Good luck!
      Reply ↓
John on December 20, 2011 at 13:55 said:

I wish I understood how to make it so that when you pressed “search” it searched your site ;(
Reply ↓
- Red on December 20, 2011 at 13:58 said:
  
  John, I’m thinking to write a tutorial about how to use a CSS3 custom search with something like Google CSE. I think that would help you.
  Reply ↓
  - John on December 20, 2011 at 14:03 said:
    
    That would be great!
    Reply ↓
Odilia on December 24, 2011 at 08:32 said:

Red, I have seen some of your tutorials. So i would like to find out how to resolve a bug with my CSS. Most browsers show the nav bar, but Explorer,
which shows just a piece of it. I was thinking just to get rid of the URL bg image, but I wonder if you can help me.
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b
I was wondering if should I try your webkit-gradient. Though what exactly is this?
thank you!
Reply ↓
- Red on January 3, 2012 at 17:37 said:
  
  Hey Odilia, I’m not sure what do you mean exactly. You can send more details via contact page.
  Reply ↓
takman on January 3, 2012 at 17:32 said:

the page im building, when zooming in and out, it causes the search box to change. how can i keep it unchanging/static when zooming?
Reply ↓
- Red on January 3, 2012 at 17:42 said:
  
  Hey takman, this is the default browser behavior and I’m afraid there is nothing you can do about that. Though, why would you like to to that?
  Reply ↓
- Nehal Kabra on June 10, 2012 at 05:12 said:
  
  Hey Takman,
  Place it inside a div tag with a default placing co-ordinates which must work.
  Reply ↓
Terry Lawton on January 11, 2012 at 15:18 said:

Thanks for the post. Here’s an article with best practices for creating a search form that is quick and easy to use http://blog.caspio.com/web-database/7-tips-for-creating-user-friendly-search-forms/
Reply ↓
Virendra Rajput on January 15, 2012 at 12:00 said:

Catalin the search box you created here looks really cool !
And I love to use CSS3 & HTML5 for my website.
It would be really cool if you make a Google like auto suggest Search Box! I would love to see that !!!!
Thanks!!
Reply ↓
Elvis Shrestha on January 19, 2012 at 22:35 said:

I used this trick in http://blogager.com, thanks a lot… keep it up
Reply ↓
Jan Plähn on January 30, 2012 at 19:25 said:

How can I change the texts “Type Here” and “Search” ?
Reply ↓
- Red on January 30, 2012 at 19:59 said:
  
  Jan, you can search for these texts in the demo page source.
  Reply ↓
mark on February 19, 2012 at 19:30 said:

nice tutorial
Reply ↓
Atul patel on February 23, 2012 at 14:29 said:

good coding for search. i like blog.
Reply ↓
nikun on March 17, 2012 at 13:28 said:

best code
Reply ↓
Troland on April 11, 2012 at 06:26 said:

Hi,i’m newbie,i found a little problem in the #searchform of DEMO 1 that i can’t center the inner content without set the text-align attr.
Reply ↓
paul on April 13, 2012 at 07:07 said:

How do you make it search now????
Reply ↓
expresnt on April 15, 2012 at 12:32 said:

best CSS3 search box
Reply ↓
magesh on April 19, 2012 at 13:34 said:

This css3 tutorial helps to build my own site search box. thanks for sharing…
Reply ↓
Donald on April 25, 2012 at 08:21 said:

THANKS! This will be on my site by morning!
Reply ↓
Arun David on May 1, 2012 at 08:27 said:

Nice search form design… I’ve also designed a search form using CSS3 and wrote a blog about it, http://tinywall.info/2012/05/01/fancy-search-box-form-using-css-html-css3/
Reply ↓
Windo on June 23, 2012 at 04:59 said:

Just came here using google, am in the middle of developing a responsive wp theme, going to try this method right away. bookmarked, Thanks :)
Reply ↓
Becky O'Connor on July 3, 2012 at 23:08 said:

Hi, thanks for the nice coding and beautiful search box! I am having trouble with this line of code though:
$(document).ready(function() {
I have it placed here in my document:
21 $searchform->display();
22 $(document).ready(function() {
23 if (!Modernizr.input.placeholder)
24 { (etc.)
I get this error message: Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in D:\Hosting\6516962\html\calendar\searchform.php on line 22.
Should I be changing document to my document name? I have tried many different adjustments in this code bit, (removing different “(“, but could not solve. Would you be available to help?
Reply ↓
Chloe on July 12, 2012 at 22:11 said:

This is great, I used your css elements to my website’s search box & it looks so great.
Thank you very much!
Reply ↓
Nezam on July 13, 2012 at 22:13 said:

Hello can you just place them all together so i can just copy the whole code and past it please.
Reply ↓
Andrew on July 15, 2012 at 14:46 said:

Where do you put the CSS after you type the HTML?
Reply ↓
safia on July 30, 2012 at 17:24 said:

Thnxs
Reply ↓
Khalid on October 8, 2012 at 14:06 said:

Totally awesome :)
Reply ↓
Mohammad on November 11, 2012 at 18:26 said:

How do I make it ‘Search’, It doesn’t really do anything, What am I doing wrong, can you please tell me what to do?
What do I do to make it search a page for content??
Reply ↓
Tony Porto on November 14, 2012 at 04:51 said:

Great share, webdesignerwall has a very similar tutorial for responsive search bars css coding.
Reply ↓
Lisa on November 15, 2012 at 21:39 said:

Thanks for the great tutorial! I am caught up on one thing, however.
Let me forewarn you, I have been out of the web design field for a couple years and I just recently got a job where I am coding again… so I am a bit rusty…
In terms of the javascript at the bottom of the tut, where is that supposed to go? In the header or in the body? Within the html? I am a bit confused as I have usually worked with only html/css. Thanks in advance for the help!
Reply ↓
shanuka Wijekoon on December 25, 2012 at 15:08 said:

Thanks alot…this search box is awesom :) :)
Reply ↓
Atish on February 28, 2013 at 08:35 said:

Awesome!!!
Reply ↓
Prosfores on March 15, 2013 at 17:14 said:

Thank you!
Reply ↓
Kevin on April 25, 2013 at 06:06 said:

i manage to create a search box using this code problem is that when i try seraching its not returning any results can anybody help me ?
Reply ↓