谷歌自定義搜索引擎（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）按鈕圖像丟失/未出現

回答

相關問題