Adding an image into the Search Form field

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>

HTML:

 

Normally when you want to have an image showing in a text box, you use a background image. However the text will sit on top of the image not next to it unless you stick in a bunch of non breaking spaces. You really should be doing one or the other. ot possibly put the image on the right side of the box so it does not interfere with user input.

 

Thanks for your message.
However, I don't know how to "be doing one or the other". Any help will be appreciated.
p.s. I looked at about.com and there's looks pretty good. Something similar to that would be great.

 

Then you need to learn by trying somethings instead of waiting for someone to write code for you. Everything you need is in the source code on about.com; if that is the effect you want so view source, cut the code you need, paste it into notepad, inspect the search element to see how the styling is done. You now have everything you need to experiment with it and learn how to get the effect you want, plus you may come up with additional options you like even better.

 

Thanks for your reply. I try many things before I use the Forum, and have had no success, so I'm still looking for help here.
Any additional assistance will be appreciated.

 

#keyword{
width: 400px;
height: 40px;
border-style:solid;
border-width: 1px;
border-color:#AAAAAA;
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
}

Code (CSS):

Just add background: ('yourimageurl'); to the keyword id on css or use css3 gradient online tool http://www.colorzilla.com/gradient-editor/

 

<style type="text/css">
.form-style{
}
.form-style input[type="text"]{
width:400px;
height:35px;
background:url('https://scontent-a-mad.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10516615_651296848294271_7586521064041394594_n.jpg?oh=c3abfd0d37edc61715ee483979601e9b&oe=543C91B6') 3px -36px no-repeat;
/* background:url('../images/img.jpg') top left no-repeat;*/
line-height:35px;
padding-left:35px;
border:1px solid #CCCCCC;

}
.form-style input[type="submit"]{
width:auto;
height:36px;
background:#F90;
color:#FFF;
border:1px solid #ce4e00;
font-size:18px;

box-shadow:inset 0 1px 2px #fafafa;
-moz-box-shadow:inset 0 1px 2px #fafafa; /* for firefox...*/
-webkit-box-shadow:inset 0 1px 2px #fafafa; /* for safari, crome...*/
-o-box-shadow:inset 0 1px 2px #fafafa; /* for Opera...*/
-ms-box-shadow:inset 0 1px 2px #fafafa; /* for MS internet explorer...*/

}
</style>


<form method="get" action="../search.php" class="form-style">
<p>
<div id="mysiteSearch">
<input type="hidden" name="type" value="videos" />
<input type="text" size="52" name="keyword" id="keyword" value="e.g. los angeles" >
<input type="submit" name="sa" value="Search" id="mySearch"/><br />
</div>
</p>
</form>