添加搜索圖標，輸入框

<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 =添加;在此未示出爲簡單起見）。這將是一個典型的輸入：添加搜索圖標，輸入框

<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，我可以以固定的方式定位搜索圖標。

感謝

來源

2012-12-24 j1nma

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

注：我增加了很多額外的代碼，使搜索框更好看，必要的代碼，以使搜索box apear是padding-left，background-image：url，background-repeat和background-position。將「http://i47.tinypic.com/r02vbq.png」替換爲您想要的任何搜索圖標。

同樣重要的是要知道，現在在HTML5中，大多數瀏覽器渲染

<input type="search" results>

與搜索圖標。輸入類型搜索使其成爲一個搜索框，用「x」按鈕清除，添加「結果」也顯示搜索框。當然，你也可以添加一個CSS和JavaScript的x按鈕到常規搜索框中。注意輸入類型搜索允許非常少的樣式也很重要。演示在Safari在Mac上：

Demo

告訴我，如果這可以幫助你，並確保標記爲答案。 :)

來源

2012-12-24 05:48:57

AMAZING解釋，毫無疑問它會工作，但是，你知道，如果我可以，比方說，讓搜索框透明，或更改的顏色搜索圖標？ – j1nma

好吧，我提供的代碼在搜索框中搜索到搜索圖標，因此使搜索框變爲透明圖標。當然，您可以使用相對定位，這樣可以使搜索圖標和搜索框獨立。你可以編輯搜索圖標來改變顏色（這不能在CSS中完成），或者修改照片編輯程序的不透明度，或者從頭開始改變顏色，但我有點像我的搜索圖標。 :)這裏是相對定位的例子：http://jsfiddle.net/525h6/。您也可以通過追蹤來完成此操作，但這將會很有幫助 – 2012-12-24 16:56:51

關於我的答案中的代碼「outline：0」，我當時毫無頭緒，我認爲您最好閱讀http://outlinenone.com/。 – 2012-12-28 02:06:48

使用background-image把圖像到跨度中，例如，然後給它一個相對位置，將其移動到左側，使其重疊的搜索框右端，例如：

#g-search-button { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    position: relative; 
    left: -22px; 
    top: 3px; 

    background-color: black; /* Replace with your own image */ 
}

Working example on JSBin

注：這不是我的答案，我發現它here

來源

2012-12-24 05:55:23

有上kirupa.com這裏一步步：http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

隨着你在這裏CSS的相關位：

input[type=text] { 
    width: 260px; 
    padding: 5px; 
    padding-right: 40px; 
    outline: none; 
    border: 2px solid #999999; 
    border-radius: 5px; 
    background-color: #FBFBFB; 
    font-family: Cambria, Cochin, Georgia, serif; 
    font-size: 16px; 
    background-position: 270px -10px; 
    background-image: url('http://www.kirupa.com/images/search.png'); 
    background-repeat: no-repeat; 
}

來源

2013-05-26 04:54:22 morefromalan

添加搜索圖標，輸入框

回答

相關問題