A little CSS background trick

Text input with background image

We're now going to see how you can create an input box like the one you see below:

All we need in order to create an input box like this is an image of a magnifying glass and some CSS code.

This input box is simply created by adding a background image to the the input tag and a left padding so that the text doesn't overlap the background image.

This is an example of the CSS:

.searchBox{
  background-image:url('images/magnifying-glass.gif');
  background-repeat:no-repeat;
  padding-left:20px;
}

Now, we simply assign our input tag to the CSS class "searchBox":

<input type="text" name="search" class="searchBox">