Create a text field with image background

This little css code will create a text field with an image background.
All we need is an image and a little css code.
In this example we use the magnifying glass image.
The text field is created by adding the background image and left.

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

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


The text field code:
<input type="text" name="search" class="searchBox">

This will create a text field like the image below.

For a working example of this, click on "CSS Tutorial Search" (left menu).

Advertisement

User Comments: 1

 It doesn't work in IE6

It doesn't work in IE6. When you type very long string, that is longer that input width, then the zoom icon disapear...