css - Google 自定义搜索引擎 (CSE) 按钮图像丢失/未出现

标签 css google-custom-search

实现 Google 自定义搜索引擎 (CSE) 并将其 JavaScript 代码添加到我网站的母版页后,我看到了搜索框和按钮,但按钮上没有文本或图像。它只是一个空白的灰色条,如下所示。
CSE with no button image

灰色按钮应该有一个放大镜的图像。这是 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 元素添加内联样式以增加高度,但这没有帮助。

最佳答案

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

关于css - Google 自定义搜索引擎 (CSE) 按钮图像丢失/未出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36799767/

相关文章:

javascript - 如何使用javascript更改此输入代码的值?

python - 谷歌自定义搜索返回不同的结果?

javascript - Gwt 按钮需要双击才能加载 div 中的所有数据

css - 如何使用@media min-width 和 max-width 来固定容器的宽度

html - CSS 在中间垂直对齐 LI

jquery - 提交时清除 Google CSE 输入

html - Internet Explorer 中的 flexbox 列行问题

html - 响应式布局的 CSS Overstate

c# - 为什么我对 Google 自定义搜索 API 的调用失败并显示请求错误(无效参数)?

google-custom-search - 使用 Google 自定义搜索 API 进行日期范围搜索