Google Custom Search with custom search box and button?

Question

I am trying to make a Google custom search (I just need some sort of search engine on my site), and I need to make it so that I can use my own search box (input field). I need it to be of exact size. I also need to be able to make my own button to search. I am going to need to be able to change the size and background of the search button. I am not completely sure yet, but I might actually need it to be a regular img.

Does anyone know how to do this?

If you cannot do this with Google, do you know of another way to do it?

If there is no other way besides using your own search engine, can I please get a link to a very simplified tutorial on how to make my own. I am willing to put in the extra work to learn, but I tried a bit, and after looking at three different tuts, I gave up because they were very very long and confusing. I hope I was just looking in the wrong places.

Answer 1

Here is the one I am using, you just need to add some styles to <input id='q' which is the search box, and <input value='MyButton' is the button to click

<!-- Google CSE Search Box Begins  -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
  <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
  <input value="FORID:11" name="cof" type="hidden"/>
  <input id="q" style="width:600px;" name="q" size="75" type="text"/>
  <input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....

Edit: Above is my answer from 2010, I cannot confirm it is working or not anymore, but here is the one working.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

For more info: refer to https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

For Googlers who are looking for a solution with new "Overlay Results" option under "Look and Feel" . I used YOU's answer and added some minor hacks to make it work. Basic idea is get the code Google gives you, hide Google's search box and button, and use YOU's answer with the proper XXXXX:YYYY codes. While hiding <gcse:search></gcse:search>" do not use display:none otherwise search results will not work.

<script>
    (function() {
    var cx = 'XXXXXXXXXX:YYYYYYYYY';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
    <gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="" name="q" size="75" type="text"/>
    <button class="btn">Search</button>
</form>

Answer 3

ge stackoverflow,

the issue really got me fired-up enough to do a mini walk-through - if you are trying to set up a v2 bar, dealing with the flat spyglass, just want to get the spyglass to work, want to replace the custom bar altogether using v2, finding and locating the styles used and overriding them. Hope it helps! http://t.co/9nvx2l0DeD @eb_p1

long address: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2