Textbox with search icon placement - css

Question

I am not very good at CSS, the textbox has been aligned to right, I tried putting the search icon into the textbox, it just can't go in. Here are the code:
<style type="text/css">
#textbox-search{overflow:auto;}
#textbox-search input.searchkeyword {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #8e8e8e;
background-color:#f5f5f5;
height:16px;
padding:-4px;
padding-left:-48px;
color:#4a4a4a;
float:right;
}
#textbox-search input.button{
border:0;
padding:4px;
margint:0 0 0 600px;
width:24px;
height:24px;
background:transparent url('images/search.png') center center no-repeat;
float:right;
}
</style>
<form id="textbox-search">
<input type="submit" class="button" value="" />
<input type="text" class="searchkeyword" />
</form>
UPDATE :

Answer 1

You can simply achieve this using background property like this
input{
background: url("http://png.findicons.com/files/icons/1389/g5_system/32/toolbar_find.png") top right no-repeat;
height:30px;
padding-right:30px;
}
JS Fiddle Demo
You can change Height and padding value as per your image dimension.

Answer 2

you can easily do this
.searchkeyword {
width: 100%; /*textbox width*/
float: none;
background: url(your_image.png);
background-size: 20px 20px;/*background icon size*/
background-repeat: no-repeat;
background-position: 8px 10px; /*place where you wnat*/
display: block;
text-indent: 20px; /*help to indent your text on textfield*/
}