将搜索图标添加到输入框 [英] adding search icon to input box
问题描述
<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;为简单起见,此处未显示)。这将是一个典型的输入:
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>
使用CSS我可以固定地定位搜索图标。
With CSS i could position the search icons in a fixed way.
谢谢
推荐答案
以下是我使用的CSS代码:
Here's the CSS code that I'd use:
<style>
#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;
}
</style>
注意:我添加了很多额外的代码,使搜索框看起来更好,是必要的代码使搜索框apear为padding-left,background-image:url,background-repeat和background-position。用任何搜索图标替换 http://i47.tinypic.com/r02vbq.png 希望。
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.
同样重要的是要知道现在在HTML5中,大多数浏览器呈现
It's also important to know that now in HTML5, most browsers render
<input type="search" results>
带有搜索图标。输入类型搜索使其成为搜索框,使用x按钮清除,添加结果也会显示搜索框。当然,您也可以在常规搜索框中添加带有CSS和JavaScript的x按钮。同样重要的是要注意输入类型搜索允许非常少的样式。在Mac上使用Safari进行演示:
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:
告诉我这是否对您有所帮助,并确保将其标记为答案。 :)
Tell me if this helps you, and make sure to mark as the answer. :)
这篇关于将搜索图标添加到输入框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!