Google Custom Search Engine (CSE) button image missing / not appearing

问题

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.

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>

I tried adding an inline style to gcse element to increase the height, but that didn't help.

回答1:

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>

回答2:

2 things are important to get this to work. Rest can be styled as per your needs.

.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;
}

回答3:

It's box-sizing problem. Just add box-sizing: content-box; will solve it.

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

来源：https://stackoverflow.com/questions/36799767/google-custom-search-engine-cse-button-image-missing-not-appearing

标签

css

google-custom-search