将搜索图标添加到输入框

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

#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 ”替换为您想要的任何搜索图标。

同样重要的是要知道，现在在 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 */
}

JSBin 上的工作示例

注意：这不是我的答案，我在这里找到了

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;
}