Menu
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.
346
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 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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
