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 小提琴演示

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

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