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

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代码段后，请执行以下代码：

// Type used to hold metadata for the content of the NVM.
typedef struct
{
    void*       NvmBase;    // The original RAM address.
    uint16_t    NvmSize;    // The original NVM section size.
}   nvm_header_t;

// The linker supplies the gld_NVM_FRAM_SIZE symbol as a 'number'.
// This is represented as the address of an array of unspecified 
// length, so that it cannot be implicitly dereferenced, and cast
// to the correct type when used.
extern char GLD_NVM_FRAM_SIZE[];

// The following defines are used to convert linker symbols into values that
// can be used to initialise the _nvmHeader structure below.
#define NVM_FRAM_BASE ((void*)&_nvmHeader)
#define NVM_FRAM_SIZE ((uint16_t)GLD_NVM_FRAM_SIZE)

// Locate the NVM configuration in the non-volatile RAM section.
nvm_header_t _nvmHeader  __attribute__((section(".nvm_header"))) =
{
    .NvmBase = NVM_FRAM_BASE, .NvmSize = NVM_FRAM_SIZE
};

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

-Asrar

Answer 4

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

我刚刚发现它，它对我有用。

就是这样！