Friday, October 22, 2010

Building a Prettier Search Box

Note: if you’re reading this off-site (feed reader, facebook, etc.) and it looks funny, click through for a better view.

Let's take a quick look at a typical search box:

It's boring, plain, and takes up a lot of space. But, the code is about as simple as it gets:

<input />
<
input type="submit" />

We can improve things a great deal by adding a shiny graphic:

That's most easily accomplished by changing the input type from "submit" to "image" like so (this could be accomplished in CSS with a bit more effort):

<input />
<
input src="search.gif" type="image" />

Now we're talking. Let's go a little further:

Here we've overlaid the image with the box for a very clean effect. This uses the same HTML (I just added classes) but adds just a teenie bit of CSS:

/* overlay search button on the actual box */
input.search-button { position:relative; left: -20px; top:1px } 

/* pad out the input so a user's search won't go under the search button */
input.search-box { padding-right:20px; }

Clean and simple.

It has one minor drawback in that it doesn't support CSS sprites. If you want that, you'll need to use one of the background-image tricks at the link I mentioned earlier.

Of course once Google's Instant Search sweeps the web this will all be a cow's opinion: moo.