Javascript 将搜索图标添加到输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14017464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding search icon to input box
提问by j1nma
<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:
在上面的代码中，我想为每个用按钮生成的新输入添加一个搜索图标（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>
With CSS i could position the search icons in a fixed way.
使用 CSS，我可以以固定方式定位搜索图标。
Thanks
谢谢
回答by
Here's the CSS code that I'd use:
这是我将使用的 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;
}
Note: I added a lot of extra codes to make the search box look better, the necessary code to make the search box apear is padding-left, background-image:url, background-repeat and background-position. Replace "http://i47.tinypic.com/r02vbq.png" with whatever search icon you want.
注意：我添加了很多额外的代码来使搜索框看起来更好，使搜索框出现的必要代码是 padding-left、background-image:url、background-repeat 和 background-position。将“ http://i47.tinypic.com/r02vbq.png”替换为您想要的任何搜索图标。
It's also important to know that now in HTML5, most browsers render
同样重要的是要知道，现在在 HTML5 中，大多数浏览器都呈现
<input type="search" results>
with a search icon. The input type search makes it a search box, with a "x" button to clear, and adding "results" also displays a search box. Of course you could also add an x button with CSS and JavaScript to a regular search box. It's also important to note that input type search allows very little styling. Demo on Safari on a Mac:
带有搜索图标。输入类型搜索使其成为搜索框，用“x”按钮清除，添加“结果”也显示搜索框。当然，您也可以将带有 CSS 和 JavaScript 的 x 按钮添加到常规搜索框中。同样重要的是要注意输入类型搜索只允许很少的样式。在 Mac 上的 Safari 上演示：
Tell me if this helps you, and make sure to mark as the answer. :)
告诉我这是否对您有帮助，并确保标记为答案。:)
回答by Karthik Chintala
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
将图像放入跨度中，例如使用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 */
}
Note: This is not my answer, i've found it here
回答by morefromalan
There's a step by step on kirupa.com here: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm
kirupa.com 上有一步一步的介绍：http://www.kirupa.com/html5/creating_an_awesome_search_box.htm
With relevant bit of CSS for you here:
在这里为您提供相关的 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;
}
