Textbox с размещением Поиск иконок

Question

Я не очень хорошо CSS, текстовое поле выстроен в соответствии с правом, я попытался поставить значок поиска в текстовое поле, он просто не может пойти в Вот код:

<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

Вы можете просто достичь этого, используя свойство background как этот

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

Вы можете изменить значение высоты и заполнения в соответствии с вашим размером изображения.

Answer 2

вы можете легко сделать это

.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*/ 
}