16 
<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>

Within the code above, i want to add a search icon for every new input generated with a button (id=add ; not shown here for simplicity). This would be a typical input:

<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
    <span class="glass"></span>
    <span class="handle"></span>
</span>
</label>

With CSS i could position the search icons in a fixed way.

Thanks

4

3 回答 3

32

这是我将使用的 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 上演示：

演示

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

于 2012-12-24T05:48:57.390 回答
4

将图像放入 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 上的工作示例

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

于 2012-12-24T05:55:23.323 回答
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;
}
于 2013-05-26T04:54:22.680 回答