Adding an image into the Search Form field

HTML & CSS
1

I’m using this Search Form which works successfully, but I’d like to add a magnifying glass icon image in front of the Form field example text “e.g. los angeles”. Can you help me do that? What code and where would it go, please? Thanks.

Here’s the current code:

<form method="get" action="../search.php">
<p>
<style type="text/css">
.form_label{
}
#keyword{
width: 400px;
height: 40px;
border-style:solid;
border-width: 1px;
border-color:#AAAAAA;
}
</style>
<div id="mysiteSearch">
<input type="hidden" name="type" value="videos" />
<input type="text" size="52" name="keyword" id="keyword" value="e.g. los angeles" style="color: #D9D9D9;" onfocus="if (this.value=='e.g. los angeles') {this.value=''; this.style.color='#696969';}" >
<input type="image" align="top" src="../images/search.png" name="sa" value="Search" id="mySearch"/><br />
</div>
</p>
</form>
2

Hi ChrisjChrisj.

Do you mean an image to the left inside the field and before the text?

Or after the text?

3

Thanks for your reply/assistance.
Yes, “to the left inside the field and before the text”, similar to what they have at www.about.com

4

As you see, the search form in www.about.com has a completely different structure, which includes a span element (<span class=“search sprite”></span>) that adds the magnifying glass icon as background through the following css rule:


.sprite {
    background-image: url("../img/sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
}

In the case of your form, I would use also the background property to include the icon by adding some padding to the left to create space for the icon, and reducing the width of the field proportionally.

Like this:

#keyword {
    border-color: #aaaaaa;
    border-style: solid;
    border-width: 1px;
    height: 40px;
    padding-left: 30px;
    width: 370px;
    background: url("the-magnifying-glass-icon.png") no-repeat left
}