First of all, using a program like Adobe Photoshop or the online service SUMO Paint, design your search field images. In this tutorial, we've made them look like this:

Left	Right
This is the background image for the custom search field. Be sure to make it wide enough - you don't have to worry about the correct size at this point.	This is one image that consist of the three different states we want out search button to have. Each state is 34 px wide.

Now, let's create the HTML and CSS needed for this custom search field.

HTML

<div class="searchBoxHolder">
  <input class="searchField" type="text" />
  <a class="searchButton" href="#"></a>
</div>

This is all we need. Remember to wrap this code in a <form> tag before you put this online.

CSS

Here comes the magic:

.searchBoxHolder {
  height: 30px;
  width: 504px;
}

.searchField {
 outline: 0;
  float: left;
  height: 20px;
  width: 460px;
  padding: 5px 5px;
  font-size: 14px;
  background-image: url(/path/to/your/left/image.png);
}

.searchButton {
  display: block;
  float: left;
  width: 34px;
  height: 30px;
  margin: 0px;
  padding: 0px;
  outline: 0;
  background-image: url(/path/to/your/right/image.png);
}

.searchButton:hover {
  background-position: 68px 0px;
}

.searchButton:active {
  background-position: 34px 0px;
}

Result

Finished! You can now adjust the width of this custom search field without having to create a new image each time. Let's illustrate this. Make the following changes to the CSS:

.searchBoxHolder {
  width: 404px;
}
.searchField {
  width: 360px;
}

We have now reduced the width by 200px. Notice that we have not changed anything else. If we implement the HTML code once more, the result will look like this:

As you can see, changing its width is very easy using this technique. It's also worth mentioning that the CSS sprite technique used on the search button is very nice because the three states are located in the same image. Older techniques involving three different images causes a delay while the image is loaded, ie. when hovering the image.