Css 谷歌自定义搜索引擎（CSE）按钮图像缺失/未出现

在实现了一个谷歌定制搜索引擎（CSE）并将其JavaScript代码添加到我的网站主页之后，我看到了搜索框和按钮，但按钮上没有文本或图像。它只是一个空白的灰色条，如下所示。

灰色按钮应该有放大镜的图像。这是谷歌提供的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>

（功能（）{
变量cx='xxxxxxxxxxxxxxxxx:xxxxxxxxxx'；
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）；
})();

---

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

这是一个CSS问题，需要CSS修复。谷歌已经为按钮创建了一个CSS类，该类的样式属性可以被覆盖。因此，我刚刚在母版页的

部分添加了以下CSS样式部分，解决了问题：

<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>

.cse.gsc搜索按钮输入.gsc-search-button-v2，
input.gsc-search-button-v2{
高度：26px！重要；
页边距顶部：0！重要；
最小宽度：13px！重要；
填充：5px26px！重要；
宽度：68px！重要；
}

这是

盒子大小的问题。只需添加
框大小：内容框将解决此问题

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

有两件事很重要，可以让它发挥作用。其余部分可根据您的需要定制

.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;
}

您不需要.cse和.gsc搜索按钮。此外，input.gsc-search-button-v2添加了两次。似乎（现在？
）.gsc-search-button
是一个
按钮，而不是
input
，因此这些CSS规则不再与按钮匹配。