搜索字段中的搜索图标

Question

如何将搜索图标放在搜索字段中。此图标位于搜索栏的前面，搜索栏后面有搜索按钮。 像这个 -

Answer 1

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

Answer 2

结帐这个代码小提琴得到的它是如何实现的想法：下面的代码usonh引导

<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; } 

http://codepen.io/anon/pen/GoXKyg

Answer 3

使用CSS。这段代码很容易在你的页面中实现。

使用引导，并有默认的图标文件我使用标签 。

如果你想要不同的图标，那么你可以在这里使用。

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

.right-inner-addon i { 
    position: absolute; 
    right: 0px; 
    padding: 10px 12px; 
    pointer-events: none; 
} 

Answer 4

下面是我使用的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> 

注：我添加大量额外的代码，使搜索框看起来更好，使搜索框apear的必要代码是填充左侧，背景图像：网址，背景重复和背景位置。将“http://i47.tinypic.com/r02vbq.png”替换为您想要的任何搜索图标。

同样重要的是要知道，现在在HTML5中，大多数浏览器渲染

<input type="search" results> 

与搜索图标。输入类型搜索使其成为一个搜索框，用“x”按钮清除，添加“结果”也显示搜索框。当然，你也可以添加一个CSS和JavaScript的x按钮到常规搜索框中。注意输入类型搜索允许非常少的样式也很重要。演示在Safari在Mac上：

演示

我希望它的作品了你。