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.
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);
}
});
}
});
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.
Related content
Great write-up Catalin! Would love to see a screenshot in IE as well, to see how passable it is for production.
Thank you Jamie, you can try it with IEtester or Browsershots.
As I wrote above, it degrades gracefully :)
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#
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
Russ, thanks for sharing the iPad screenshots. Indeed, seems to be the same rendering bug.
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
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!
y u no write better js?
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! ;)
nice article I love css3 and html5 somuch so perfect.
Thank you @jackiller!
As you probably noticed reading my articles, I’m also a big CSS3 fan.
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 :)
Hey Dimitry, nice to hear you enjoyed this article!
To answer to your question: yeah, why not, as long you provide a link back…
Mulţumesc frumos :)
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.
Thank you Paul, it is very nice to hear that!
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!!
(:
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!
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!
Thanks David. It’s nice to hear you found it useful!
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!
The above search box isn’t functional, is just CSS3. For example you could integrate it further with something like Google custom search.
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? :/
Moogie, if you want to create your own search then you should use a
search.phpfor 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!
Thanks a lot, really the best styled searchform I find, I put it on my website.
Again thanks, and keep with those great tutorials.
Thanks, nice to hear that!
thanks man!. U´ve done a terrible art work
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.
Nice to hear you found it useful! Thanks ;)
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.
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…
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?
Bird, just forget about that! I will remove that extra rule I forgot there…
Thanks for the heads up!
very nice and easy to follow…
i hope you can give more tutorial about html5.
you are the best….
^_^
Thanks ahmad, I’m glad you found it useful and easy to follow.
how to join this script for adsense for search?
can you help me Red?
-_-
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.
ok, I will try. I’ll report back if it worked …
^_^
Thnx for share wndrful technolgy, kinldy help me in this context to set this search box on the left cornr of the page.
Thanks Tanveer. To left-align it, just add
float:leftto the#searchboxin your CSS.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
I’m afraid I can’t help you regarding ASP.NET
Thax for the quick reply, i solved the problem. and working in asp.net
Nice to hear that ;)
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.
Hugh, when you change the
#searchbox‘sheight, change it also for theinput type="text"andinput type="submit".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!
Perhaps you need to clear margin for the
bodywrapper:body {margin: 0}Good luck!
I wish I understood how to make it so that when you pressed “search” it searched your site ;(
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.
That would be great!
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!
Hey Odilia, I’m not sure what do you mean exactly. You can send more details via contact page.
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?
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?
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/
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!!
I used this trick in http://blogager.com, thanks a lot… keep it up
How can I change the texts “Type Here” and “Search” ?
Jan, you can search for these texts in the demo page source.
nice tutorial