Googleカスタム検索エンジン（CSE）ボタン画像が見つからない/表示されない

Googleカスタム検索エンジン（CSE）を実装し、自分のサイトのマスターページにJavaScriptコードを追加した後、検索ボックスとボタンが見えたその上にテキストやイメージはありません。以下に示すように、それはちょうど空白の灰色のバーでした。
Googleカスタム検索エンジン（CSE）ボタン画像が見つからない/表示されない

グレーのボタンには拡大鏡の画像が表示されます。これは、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要素にインラインスタイルを追加しようとしたが、それは助けにはなりませんでした。

出典

2016-04-22 Eric Barr

CSSの問題で、CSSの修正はprovided by Wes on appfiniteでした。 Googleはボタン用のCSSクラスを作成し、クラスのスタイル属性をオーバーライドすることができます。だから私はちょうど私のマスターページの<head>セクションに次の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>

出典

2016-04-22 17:14:28

.cseと.gsc-search-buttonは必要ありません。また、input.gsc-search-button-v2が2回追加されます。 – 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

Googleカスタム検索エンジン（CSE）ボタン画像が見つからない/表示されない

答えて

関連する問題