将搜索图标添加到输入框

<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
 $('#inputs').append('<input type="text" value="">');
});
});
</script>

在上面的代码中，我想为使用按钮生成的每个新输入添加一个搜索图标（id=add；为简单起见，此处未显示）。这将是一个典型的输入：

<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
    <span class="glass"></span>
    <span class="handle"></span>
</span>
</label>

使用 CSS，我可以以固定的方式定位搜索图标。

Thanks

这是我要使用的 CSS 代码：

#add {
  padding: 17px;
  padding-left: 55px;
  width: 300px;
  border: 1px solid #f5f5f5;
  font-size: 13px;
  color: gray;
  background-image: url('http://i47.tinypic.com/r02vbq.png');
  background-repeat: no-repeat;
  background-position: left center;
  outline: 0;
}

注意：我添加了很多额外的代码来使搜索框看起来更好，使搜索框出现的必要代码是 padding-left、background-image:url、background-repeat 和 background-position。代替 ”http://i47.tinypic.com/r02vbq.png http://i47.tinypic.com/r02vbq.png“使用您想要的任何搜索图标。

同样重要的是要知道现在在 HTML5 中，大多数浏览器都会呈现

<input type="search" results>

带有搜索图标。输入类型搜索使其成为搜索框，带有“x”按钮可清除，添加“结果”也会显示搜索框。当然，您也可以将带有 CSS 和 JavaScript 的 x 按钮添加到常规搜索框。还需要注意的是，输入类型搜索只允许很少的样式设置。 Mac 上 Safari 的演示：

告诉我这是否对您有帮助，并确保标记为答案。 :)