将搜索图标添加到输入框

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

谢谢

- j1nma

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上演示：

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

- user752723

---

一个非常棒的解释，毫无疑问它会起作用，但是你知道我是否可以让搜索框透明，或者改变搜索图标的颜色吗？ - j1nma

嗯，我提供的代码将搜索图标固定在搜索框内部，因此使搜索框透明也会使图标透明。当然，您可以使用相对定位，这将允许搜索图标和搜索框独立。您可以编辑搜索图标以更改颜色（这无法在CSS中完成），或者在图片编辑程序中更改其不透明度，或者从头开始创建，但我有点喜欢我的搜索图标。 :) 这是相对定位的示例：http://jsfiddle.net/525h6/。您还可以使用边距来实现此目的，但这已足够。 - user752723

关于我回答中的代码"outline:0"，当时我并不清楚，我认为你最好阅读http://outlinenone.com/。 - user752723

Answer 2

将图片放入span中，例如使用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 上的实际工作示例

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

- Karthik Chintala

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

- morefromalan