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

css, google-custom-search

Solution

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>

Problem

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.

Original source