Search bar icon styling - html

Question

I have a search text field. How can i place another search icon in search textfield?
Like one in this Image:
I need this Magnifying Button in my Textfield ( Which will be click-able )
Here is my Search Field: http://jsfiddle.net/ULtH4/
Here is my Code :
HTML:
<input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" />
CSS:
.search_container {
background-color: #FFFFFF;
width: 500px;
border-radius:5px 5px 5px 5px;
border:solid 1px #DFDFDF;
padding:2px;
}
.search_container_textfield {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-collapse: collapse;
border-radius: 5px 5px 5px 5px;
float: left;
font-size: 13px;
height: 23px;
padding: 6px 4px;
position: relative;
width: 496px;s
}
.search_container_text {
color:#006666; font-size:13px; font-weight:normal;vertical-align:top !important;
}

Answer 1

Here's a Fiddle
<div class="search_container">
<input type="text" name="search_people" placeholder="Search for people..." class="search_container_textfield" size="30" value="" id="inputString" />
</div>
.search_container_textfield {
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
float: left;
font-size: 13px;
height: 23px;
padding: 6px 4px;
position: relative;
width: 496px;
}
.search_container_textfield:focus {
outline: none;
box-shadow: 0 0 2px 1px #00aeff;
}
.search_container a {
background: url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
background-size: 30px 30px; /* background-size added because original icon is 128x128px */
display: block;
position: relative;
width: 37px;
height: 35px;
float: right;
margin: -37px -6px 0 0;
padding-left: 3px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 0;
}
.search_container a:hover {
background: #e8e8e8 url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
background-size: 30px 30px; /* background-size added because original icon is 128x128px */
}
Final result
And if you want to search id's from search filed below is jQuery solution
$(function() {
$('.search_container a').hover(function() {
var id = $('.search_container_textfield').val();
$(this).attr('href', 'search_people.php?id='+id);
});
});

Answer 2

You can wrap a <span> around the input and then use span:after to content to it, position it absolute and align it to how you want.
Fiddle here All you need to do is change 'Search' for an icon.
Here is another method I done, which supports 'fontawesome-' fonts.
This link here has an icon (Which is clickable too)