如何在文本輸入字段中添加「搜索」按鈕？

如何在this site中創建一個類似的「搜索」元素？如何在文本輸入字段中添加「搜索」按鈕？

enter image description here

如果我們查看源代碼，他已經一個文本框後面是<span>標籤。

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /> 
<span id="g-search-button"></span>

我在哪裏可以得到類似的「放大鏡」圖像？

來源

2010-11-02 Someone

使用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

來源

2010-11-02 16:23:27 casablanca

@casablanca：我需要把背景圖像，而不是背景顏色 – Someone 2010-11-02 16:27:01

@Derby：你是這樣做的。 – 2010-11-02 16:28:58

@casablanca：9,987點。所以...接近......主持人......權力... – 2010-11-02 16:41:41

如果您在谷歌瀏覽器中查看該頁面，右鍵單擊搜索按鈕並選擇「檢查元素」，您將能夠看到用於實現此效果的CSS。

如果你不熟悉CSS，我徹底推薦‘CSS: The Definitive Guide’。

來源

2010-11-02 16:18:36

+1爲優雅的答案。應該提及Firefox的Firebug。 – 2010-11-02 16:21:00

類似Iconspedia的網站有類似的number of free icons。

無論你得到圖標，都要小心以確保你有權在你的應用程序中使用它。許多圖形都受到保護，有些還具有限制性許可證。

來源

2010-11-02 16:20:57

我們現在有Font Awesome和IcoMoon。 – 2015-06-30 05:33:45

你的眼睛在欺騙你。該按鈕不在文本框內。使用背景圖片是不是要走的路，因爲它不會提供可點擊的提交按鈕。

你需要做的就是添加一個包裝DIV圍繞輸入：文本和輸入：提交

的包裝將看就像是一個文本框，但實際上將包含一個透明的文本框，一個提交按鈕。你需要明確刪除樣式的輸入，文本和輸入：提交元素

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Input Example</title> 
    <style type="text/css"> 
/* <![CDATA[ */ 

.search 
{ 
    border: 1px solid #000000; 
    width: 200px; 
} 

.search input[type="text"] 
{ 
    background: none; 
    border: 0 none; 
    float: left; 
    height: 1.5em; 
    line-height: 1.5em; 
    margin: 0; 
    padding: 3px 0; 
    width: 180px; 
} 

.search input[type="submit"] 
{ 
    background: #CCCCCC url(path/to/image.jpg); 
    border: 0 none; 
    height: 1.5em; 
    line-height: 1.5em; 
    margin: 0; 
    padding: 3px 0; 
    text-indent: 100px; 
    width: 20px; 
} 

/* ]]> */ 
    </style> 
</head> 
<body> 
    <form ...> 
    <div class="search"> 
     <input type="text" /> 
     <input type="submit" /> 
    </div> 
    </form> 
</body> 
</html>

您保留提交按鈕是非常重要的，否則按下回車鍵，而搜索將不會有一個默認的反應。另外在文本字段之後放置提交按鈕允許人們實際點擊按鈕。

編輯：你可以製作自己的放大圖片，它們很容易在20x20px透明png中製作。

來源

2010-11-04 18:23:03 zzzzBov

爲了幫助用戶反饋，爲什麼不在鼠標懸停在放大鏡上時將指針圖標添加到鼠標中？只需將其添加到您的CSS：

.search：hover { cursor：pointer; }

來源

2010-11-23 16:31:26 Simmo

我想插一個我寫的新的jQuery插件，因爲我覺得它回答OP的請求。它被稱爲jQuery.iconfield：https://github.com/yotamofek/jquery.iconfield。

它可讓您輕鬆地將圖標添加到文本字段的左側。要將圖標用作按鈕，您可以輕鬆綁定到'iconfield.click'事件，該事件在用戶單擊圖標時觸發。它還負責在鼠標懸停在圖標上時更改光標。

例如：

$('#search-field').iconfield({ 
    'image-url': 'imgs/search.png', // url of icon 
    'icon-cursor': 'pointer'   // cursor to show when hovering over icon 
}); 
$('#search-field').on('iconfield.click', function() { 
    $('#search-form').submit() 
}

我很想讓我的工作提出意見。

來源

2012-10-15 11:18:34

我試過使用這個插件，但圖標光標不工作，iconfield.click沒有發射，左：false選項也沒有生效！ – Bernice 2014-03-29 20:26:26

嘿，請通過我的GitHub配置文件中列出的電子郵件與我聯繫。我會很樂意解決問題並進行修復。 – 2014-03-30 02:54:16

我剛剛給你發了一封電子郵件。乾杯！ – Bernice 2014-03-30 13:41:04

如果您在該字段上使用背景圖像，則無法綁定到該字段以獲取點擊操作。所以解決方案是有一個單獨的搜索字段和圖像，所以你可以將jQuery中的點擊事件綁定到圖像。小提琴這裏：

http://jsfiddle.net/Lzm1k4r8/23/

您可以調整left:位置向左或搜索框的右側。

來源

2015-08-13 09:54:34 BigMeat

這節省了我很多時間:) – user2323308 2015-11-18 04:24:13

如何在文本輸入字段中添加「搜索」按鈕？

回答

相關問題