如何使用“搜索”按鈕替換谷歌自定義搜索引擎的放大鏡？

Question

我正在使用GCSE的基本代碼和標准“緊湊”主題：

<script>
  (function() {
    var cx = '111111111111111111111:11111111111';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

這會將輸入按鈕呈現為：

<td class="gsc-search-button">
    <input type="image" src="http://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search">
</td>

我希望它是這樣的

<td class="gsc-search-button">
    <input type="button" value="search" title="search">
</td>

我似乎無法弄明白該怎么做。 這可能嗎？

Answer 1

function myCallback() {
    $("td.gsc-search-button input").attr("type", "submit").attr("value", "submit");
}

window.__gcse = {
    callback: myCallback
}; //.......load google CSE tag after this

這對我有用，它可以保留所有事件處理程序。

Answer 2

我發現用文本而不是圖像添加搜索按鈕的唯一方法是更改​​主題。

您可以在創建過程中單擊左側菜單中的“外觀”鏈接來更改主題。 然后單擊主題選項卡進行更改。 一旦您更改為具有搜索文本的主題，您可以單擊“自定義”選項卡以更改顏色。

https://support.google.com/customsearch/answer/4513783?hl=en

Answer 3

使用jQuery，您可以非常輕松地完成它。

加載Google代碼段后，執行以下代碼：

$("td.gsc-search-button").empty().html('<input type="button" value="search" title="search">');

您只需要確保上面的代碼在 Google代碼之后運行。

-Asrar

Answer 4

不允許顯示按鈕圖像的CSS屬性是全局box-sizing: inherit在bootstrap.css文件中box-sizing: inherit 。 如果您正在使用bootstrap ，則應覆蓋此屬性以具有inherit或content-box值。 您可以通過將自定義搜索元素放在div中並為該div賦予一個具有!important屬性的屬性來覆蓋此屬性。

我剛發現它，它對我有用。

這就對了！