代码之家 › 专栏 › 技术社区 › Eric Barr

Google自定义搜索引擎(CSE)按钮图像缺失/未显示

google-custom-search css

Eric Barr · 技术社区 · 10 年前

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

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

3 回复 | 直到 10 年前

Eric Barr 10 年前

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

Neel 8 年前

有两件事很重要,才能让它发挥作用。休息可以根据您的需要进行设计。

.cse .gsc-search-button-v2, .gsc-search-button-v2 {
    box-sizing: content-box;
    min-width: 13px !important;
}

.gsc-search-button-v2 svg {
    vertical-align: middle;
}

LU WEI HSU 8 年前

它是 box-sizing 问题只需添加 box-sizing: content-box; 将解决这个问题。

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前