Question

在实施Google自定义搜索引擎（CSE）并将其JavaScript代码添加到我的网站的母版页后，我看到了搜索框和按钮，但按钮上没有文字或图片。它只是一个空白的灰色条，如下所示

灰色按钮应该有放大镜的图像。这是Google提供的JavaScript代码，因此在我看来，所有可以更改的内容都是：

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

我尝试为gcse元素添加内联样式以增加高度，但这没有帮助。

Answer 1

这是一个CSS问题，CSS修复程序是provided by Wes on appfinite。 Google已为该按钮创建了一个CSS类，并且可以覆盖该类的样式属性。所以我只是将以下CSS样式部分添加到我的母版页的<head>部分，这解决了问题：

<style>
    .cse .gsc-search-button input.gsc-search-button-v2,
    input.gsc-search-button-v2 {
        height: 26px !important;
        margin-top: 0 !important;
        min-width: 13px !important;
        padding: 5px 26px !important;
        width: 68px !important;
    }
</style>

Answer 2

这是box-sizing问题。只需添加box-sizing: content-box;即可解决问题。

.gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    box-sizing: content-box;
}

Answer 3

要使此功能正常工作，两件事很重要。可以根据您的需要设置休息样式。

.cse .gsc-search-button-v2, .gsc-search-button-v2 {
    box-sizing: content-box;
    min-width: 13px !important;
}

.gsc-search-button-v2 svg {
    vertical-align: middle;
}

Google自定义搜索引擎（CSE）按钮图片缺失/未显示

3 个答案: