Google自定义搜索引擎(CSE)按钮图片丢失/未显示 [英] Google Custom Search Engine (CSE) button image missing / not appearing
问题描述
实施Google自定义搜索引擎(CSE)并将其JavaScript代码添加到我网站的母版页后，我看到了搜索框和按钮，但该按钮上没有文字或图像.只是一个空白的灰色条，如下所示.
After implementing a Google Custom Search Engine (CSE) and adding their JavaScript code to the Master Page for my site, I saw the search box and button but the button had no text or image on it. It was just a blank gray bar, as shown below.
灰色按钮应该具有放大镜图像.这是Google提供的JavaScript代码，因此在我看来，所有可以更改的内容:
The gray button is supposed to have an image of a magnifying glass. This is the JavaScript code provided by Google, so it seemed to me that was all that was available to change:
<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元素添加内联样式以增加高度，但这无济于事.
I tried adding an inline style to gcse element to increase the height, but that didn't help.
推荐答案
这是一个CSS问题，并且CSS修复程序是<head>部分中，从而解决了该问题:
It was a CSS issue and a CSS fix was provided by Wes on appfinite. Google has created a CSS class for the button and the style attributes of the class can be overridden. So I just added the following CSS style section to the <head> section of my Master Page and that solved the problem:
<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>
这篇关于Google自定义搜索引擎(CSE)按钮图片丢失/未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
