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

在执行Google自定义搜索引擎（CSE）并将他们的JavaScript代码添加到我的网站主页面后，我看到搜索框和按钮，但按钮有没有文字或图像。这只是一个空白的灰色条，如下所示。
谷歌自定义搜索引擎（CSE）按钮图像丢失/未出现

灰色的按钮应该有一个放大镜的图像。这是谷歌提供的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元素，以增加高度，但没有帮助。

来源

2016-04-22 Eric Barr

这是一个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>

来源

2016-04-22 17:14:28

您不需要.cse和.gsc-search-button。此外input.gsc-search-button-v2被添加两次。 – csandreas1

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

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

来源

2018-02-26 03:10:50

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

回答

相关问题