如何用“搜索”按钮替换谷歌自定义搜索引擎的放大镜？

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

使用 jQuery，你可以很容易地做到这一点。

Google sn-p 加载后，执行以下代码：

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

您只需要确保上面的代码在 Google 的代码之后运行。

-阿斯拉尔

Answer 3

我发现添加带有文本而不是图像的搜索按钮的唯一方法是更改​​主题。

您可以在创建过程中通过单击左侧菜单中的“外观”链接来更改主题。然后单击主题选项卡进行更改。更改为具有搜索文本的主题后，您可以单击“自定义”选项卡以进一步更改颜色。

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

Answer 4

不允许显示按钮图像的 CSS 属性是 bootstrap.css 文件中的全局 box-sizing: inherit。如果您使用bootstrap，则应覆盖此属性以具有inherit 或content-box 值。您可以通过将您的自定义搜索元素放在一个 div 中并为该 div 提供一个具有此属性的类来覆盖此属性 !important。

我刚刚发现它对我有用。

就是这样！