Textbox with background image using CSS

• Tweet

• Tweet

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.
Download following 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”: