Html 搜索字段中的搜索图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35173180/
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
Search icon in Search field
提问by user2719152
how can i place search icon in the search field. This icon is in the front of the search field while search button follows the search bar. something like this-
如何在搜索字段中放置搜索图标。此图标位于搜索字段的前面，而搜索按钮位于搜索栏后面。像这样的——
回答by Srinivas R
input{
background: url("http://kodyrabatowe.wp.pl/img/ico/search_gr.png") top left no-repeat;
height:30px;
padding-left:25px;
}
//////////////////////////
<!-- html code -->
<input type="text" name="txtBox" >
回答by Mikkel Fennefoss
Checkout this code fiddle to get an idea of how it can be accomplished:
查看此代码小提琴以了解如何完成它：
<div id="input_container">
<input type="text" id="input" value="search">
<img src="URL" id="input_img">
</div>
#input_container { position:relative; padding:0; margin:0; }
#input { height:20px; margin:0; padding-left: 30px; }
#input_img { position:absolute; bottom:12px; left:180px; width:10px; height:10px; }
回答by Patoliya Nitin
Use below code usonh bootstrap css. This code easily implement in your page.
使用下面的代码 usonh bootstrap css。这段代码很容易在你的页面中实现。
Use Bootstrap and there is default icon file i which used tag .
使用 Bootstrap 并且有使用 tag 的默认图标文件 i 。
I f you want different icon then you can use here.
如果你想要不同的图标，那么你可以在这里使用。
HTML Code:-
HTML代码：-
<div class="col-xs-6" >
<div class="right-inner-addon">
<i class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search" />
</div>
</div>
CSS :-
CSS :-
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px 12px;
pointer-events: none;
}
回答by Rohit Luthra
Its an simple and small example without any wrapper of divs, single element that is input type with icon on the left.
它是一个简单而小的示例，没有任何 div 包装器，单个元素是左侧带有图标的输入类型。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
background-color: none;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
outline: none;
}
</style>
</head>
<body>
<form>
<input type="text" name="search" placeholder="Search by list name">
</form>
</body>
</html>
回答by Transformer
Here's the CSS code that I'd use:
这是我将使用的 CSS 代码：
<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>
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 上演示：
Demo
演示
i Hope it works out for you.
我希望它对你有用。
