Create a Search Form with CSS3 and jQuery

Most websites nowadays have a search form somewhere. I’m pretty sure I don’t need to explain why it’s a good idea to have a ‘search’ functionality built into a website and most Content Management Systems already come with the functionality built in. Usually the search area is in an easy to see/find place and it’s because of this reason it’s a good idea for it to look good – Or at least consistent with the rest of the website.

I immediately notice when a search form looks a out of place because it’s not styled appropriately or at all. It always gives me the impression that the website hasn’t been designed by a professional. Perhaps that thought might not go through every persons mind when they see a poorly designed form, but I’m pretty sure a stylish form will give the website a better appearance overall.

What should a search-form contain?

There are a few things I like a search-form to have:

  • The search form should be consistent with the rest of the website – Which means that the input-field and submit-button should be styled appropriately.
  • I think search forms should have a little ‘search’ image somewhere. Images can help people to know what something is without having to read. It’s pretty common to use a magnifying glass.
  • People should know that the search form will do exactly that. So I think it’s a good idea to have the word ‘Search’ next to the form or within it.

Two decent examples of search forms are:
CSS-Tricks
CSS-Tricks Search-Form
and
David Walsh Blog
David Walsh Blog Search-Form

The HTML

<form action="" id="search-form">
    <fieldset>
        <input type="text" id="search" name="search" />
        <input type="submit" id="search-submit" value="" />
    </fieldset>
</form>

The HTML is pretty standard. I've included action="" because the form will not validate without it and because something should happen once you click submit. So it's there to remind you to add that php.
value="" has been added to the submit buttons because some browsers like to add the text "submit" to the submit button automatically. This tells the browser not to do that.

The CSS

* { margin: 0; padding: 0; }
fieldset { border: none }

#search-form {
	width: 190px;
	position: relative;
}
#search {
	background: #b2a48c;
	border: 3px solid #402f1d;
	color: #2b1e11;
	height: 20px;
	line-height: 20px;
	width: 150px;
	padding: 2px 4px;
	position: absolute;
	top: 11px;
	left: 0
}
#search-submit {
	background: #b2a48c url(../images/search.png) no-repeat 12px 7px;
	border: 3px solid #402f1d;
	height: 50px;
	width: 50px;
	position: absolute;
	top: 0;
	right: 0
}

.empty {
	color: #524630;
}

/* CSS3 */
#search { border-radius: 20px; 
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px;
	background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
	background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
	text-shadow: rgba(0,0,0,.2) 0 0 5px;
}

#search-submit { 
	border-radius: 50px; 
	-moz-border-radius: 50px; 
	-webkit-border-radius: 50px; 
	-mox-box-shadow: 0 0 5px black;

	/* Webkit-transition */
	-webkit-transition-property: background-color; 
	-webkit-transition-duration: 0.4s, 0.4s; 
	-webkit-transition-timing-function: linear, ease-in;
	}

I generally separate the CSS3 properties from the CSS2.1 like I've done above. It's just how I like writing my CSS.

The first two lines are a quick css-reset.
I've set the input field's line height to the height of itself so that the text will be forced to be centred in all browsers.
What I've done is given the form a set width and given it a relative positioning - The other items have been absolutely positioned so that the search-button can be placed on top of the input field. I've done this because I think it looks pretty cool.
The class of .empty was added to change the colour of the placeholder text.

The webkit-transition property is pretty cool. Have a look at the example in Chrome or Safari.

And that's about it. The javascript is an optional part of the tutorial to add a little bit more of an 'edge' to the form.

The jQuery Javascript

The javascript is used to achieve the word "Search.." that displays within the input field. If the input field is clicked and it contains the word "Search...", the input field is then emptied. If the input-field loses the focus and it is empty, the input field's value is changed back to "Search...".

I'm pretty sure you have seen this somewhere before, it's not really anything new, but it's a cool little space-saving addition to a search-form.

$(document).ready(function(){ 
	
	// Add the value of "Search..." to the input field and a class of .empty
	$("#search").val("Search...").addClass("empty");
	
	// When you click on #search
	$("#search").focus(function(){
		
		// If the value is equal to "Search..."
		if($(this).val() == "Search...") {
			// remove all the text and the class of .empty
			$(this).val("").removeClass("empty");;
		}
		
	});
	
	// When the focus on #search is lost
	$("#search").blur(function(){
		
		// If the input field is empty
		if($(this).val() == "") {
			// Add the text "Search..." and a class of .empty
			$(this).val("Search...").addClass("empty");	
		}
		
	});

});

If you have any questions, feel free to leave a comment.

Any questions or comments?

  1. Lucas says:

    Thanks mate, this will come in handy some day!
    Love your blog by the way 😉

    1. Jamy Golden says:

      Thank you 😉

  2. Dier says:

    Informative introduction for newbies like me! Waiting for your next post.

  3. Mark Gibbens says:

    Cheers for this, was very helpful. I did just add one further refinement. I added an “empty” class to the text input which gets removed when you focus the field. This means I can style the “Search…” text a pale grey, and darken the colour when you start typing. Here’s the full code:

    $("#search").val("Search...").addClass("empty");
    
    $("#search").focus(function(){
       $(this).removeClass("empty");
       if($(this).val() == "Search...") {
          $(this).val("");
       }
    });
    
    $("#search").blur(function(){
       if($(this).val() == "") {
          $(this).val("Search...").addClass("empty");
       }
    });
    1. Jamy Golden says:

      That’s a pretty cool idea, thanks :)

      I’ll add it to the article.

  4. I like your blog, but i got an error 404 when I try to download the file of this post. :(

    1. Jamy Golden says:

      Thanks for letting me know :) All fixed.

  5. Awesome! I can’t wait to give this a try!

  6. Anonymous says:

    Hi,

    Demo does not look like CSS3 search form or am I missing something?

  7. Nick Lachey says:

    Great 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/.

  8. Arun David says:

    Nice search box design… I too designed a search form and wrote a blog about it, http://tinywall.info/2012/05/01/fancy-search-box-form-using-css-html-css3/

  9. henk says:

    If I click the ‘search’ button my site searches for ‘Search…’ :-(

    1. Jamy Golden says:

      :( what would you like it to do?

    2. henk says:

      Well… do nothing of course :-)

      I already fixed the problem with this simple(r) script:

      $(‘#searchform’).submit(function(e) {
      if (!$(‘#searchquery’).val()) {
      e.preventDefault();
      }
      });

      Now if a visitor hit my searchbutton nothing will happen, thats all I wanted :-)

  10. Rangga says:

    Cool tutorial, create a search with jquery. Very attactive. Thanks

  11. Domink says:

    Why use this script, when you can use the placeholder attribute?

    1. Jamy Golden says:

      This is an older article and it was published when placeholder support was very flakey. Agreed that the placeholder attribute should be used in place nowadays but it’s also a good idea to add a polyfill for browsers that don’t yet support the attribute such as IE8 and 9.

  12. nagalakshmi says:

    thanks

  13. Ali says:

    nice tutorial, i have featured this tutorial at my site…

  14. martin says:

    I get the tutorial. But now why if I wanna create a search box that returns results without the use of google or php

    1. Jamy Golden says:

      Where would you like to get the results from?