文本框與搜索圖標放置

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