将搜索图标添加到输入框

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代码：

<style>
#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;
}
</style>

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

了解现在在HTML5中，大多数浏览器都会呈现

，这一点也很重要

<input type="search" results>

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

告诉我这是否对您有所帮助，并确保将其标记为答案。 ：）

Answer 2

将图像放入范围，例如使用background-image，然后给它一个相对位置并将其移到左侧，使其与搜索框的右端重叠，例如：

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

Working example on JSBin

注意：这不是我的答案，我发现它here

Answer 3

kirupa.com上有一步一步：http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

这里有CSS的相关位：

input[type=text] {
    width: 260px;
    padding: 5px;
    padding-right: 40px;
    outline: none;
    border: 2px solid #999999;
    border-radius: 5px;
    background-color: #FBFBFB;
    font-family: Cambria, Cochin, Georgia, serif;
    font-size: 16px;
    background-position: 270px -10px;
    background-image: url('http://www.kirupa.com/images/search.png');
    background-repeat: no-repeat;
}