How to replace google custom search engine's magnifying glass with a button that says “search”?

Question

I'm using the basic code and the standard "compact" theme for GCSE:

<script>
  (function() {
    var cx = '111111111111111111111:11111111111';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

This renders the input button as:

<td class="gsc-search-button">
    <input type="image" src="http://www.google.com/uds/css/v2/search_box_icon.png" class="gsc-search-button gsc-search-button-v2" title="search">
</td>

I'd like it to be something like

<td class="gsc-search-button">
    <input type="button" value="search" title="search">
</td>

I can't seem to figure out how to do it. Is this possible?

Answer 1

function myCallback() {
    $("td.gsc-search-button input").attr("type", "submit").attr("value", "submit");
}

window.__gcse = {
    callback: myCallback
}; //.......load google CSE tag after this

This works for me and it keeps all of the event handlers in place.

Answer 2

Using jQuery, you can do it quite easily.

After the Google snippet has loaded, execute this code:

$("td.gsc-search-button").empty().html('<input type="button" value="search" title="search">');

You just need to make sure that the code above runs after Google's code.

-Asrar

Answer 3

The only way that I found to add the search button with text instead of image is changing the theme.

You can change the theme by clicking on the "Look and feel" link on the left side menu during the creation process. Then click on the theme tab to change it. Once you changed to a theme that has the search text you can click on the "Customize" tab to change the colours even more.

https://support.google.com/customsearch/answer/4513783?hl=en

Answer 4

The CSS attribute which is not allowing the button image to be shown is the global box-sizing: inherit in the bootstrap.css file. If you're using bootstrap, you should override this attribute to have inherit or content-box values. You can override this attribute by putting your custom search elements in a div and giving that div a class which has this attribute with !important.

I just found that out and it works for me.

That is it!