For the last seven years the site-wide search field on this site has looked like this:

This week - in a moment of boredom - I decided to spruce it up a little and now it should look like this:

Whether it looks like that for you or not depends on the browser you're using. If you're using a modern and capable browser it should. If not you might see something like this:

Either way it should still be obvious what it is without the field label or the "Go" button?

How'd I Do That?

Simple. First I changed the HTML markup to use a little HTML5:

<form method="post" action="search?CreateDocument">
        <input type="search" placeholder="Search" name="Query">
</form>

I've highlighted the key parts. Adding the placeholder attribute is what puts the "Search" text inside the field and removes it when clicked on (no JavaScript required!). That's a new HTML feature and you can use it on any input field.

Then I added some CSS3:

input[type="search"] {
        padding: 4px 6px 4px 23px;
        border-radius: 10px;
        background: white url(images/icons/search.png) no-repeat 2px 50%;
        -webkit-appearance: none;
        border: 0;
        -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

input[type="search"]:focus{
	outline: none;
}

The last rule in the code above is to stop the field getting and orangey outline when the user clicks inside it.

And that's all there was to it really. Next time you add a search field to a form why not consider using a similar approach?