将搜索图标添加到输入框答案

【问题标题】：adding search icon to input box将搜索图标添加到输入框
【发布时间】：2012-12-10 15:31:14
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript search input icons

【解决方案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 上演示：

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

【讨论】：

A M A Z I N G 解释，毫无疑问它会起作用，但是，你知道我是否可以让搜索框透明，或者更改搜索图标的颜色？
嗯，我提供的代码将搜索图标困在搜索框内，因此使搜索框透明会使图标透明。当然，您可以使用相对定位，这将允许搜索图标和搜索框独立。您可以编辑搜索图标以更改颜色（这不能在 CSS 中完成），或者在照片编辑程序上更改它的不透明度，或者从头开始，但我有点喜欢我的搜索图标。 :) 这是相对定位的示例：jsfiddle.net/525h6。你也可以用 marging 来完成这个，但这已经足够了
关于我的答案“outline:0”中的代码，我当时一无所知，我认为您最好阅读outlinenone.com。

【解决方案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 */
}

Working example on JSBin

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

【讨论】：

【解决方案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;
}

【讨论】：