将搜索图标添加到输入框

Question

<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，我可以以固定方式放置搜索图标。

谢谢

Answer 1

这是我要使用的CSS代码：

Answer 2

例如，使用background-image将图像放入跨度，然后将其指定一个相对位置并将其向左移动，使其与搜索框的右端重叠，例如：

Answer 3

在kirupa.com上有分步说明：http://www.kirupa.com/html5/creating_an_awesome_search_box.htm