搜索字段中的搜索圖標

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

演示

我希望它的作品了你。