css - 带有搜索图标位置的文本框

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>

更新:

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

您可以根据图像尺寸更改高度和填充值。