Google 自定义搜索引擎 (CSE) 按钮图像丢失/未出现

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 class 并且可以覆盖 class 的样式属性。所以我只是将以下 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

2 件事情对于让它发挥作用很重要。休息可以根据您的需要设计。

.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) 按钮图像丢失/未出现

Google Custom Search Engine (CSE) button image missing / not appearing

css

google-custom-search