将搜索图标添加到输入框 [英] 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屋！