Google Product Forums

Changing the look and feel beyond the WYSIWYG

Chazari May 3, 2012 12:18 PM
Posted in group: Google Custom Search

Categories: Implementation :

I need to have a search form on every page that includes auto-completion but has a specific look and feel including text search field background color, border, button image, padding, height, etc. I can do it as a simple form like

<form action="" id="googleSearchArea" method="get">
<input type="hidden" name="cx" value="my id:1sc26mxgi04" /><input type="hidden" name="cof" value="FORID:10" /><input type="hidden" name="ie" value="UTF-8" />
<input type="search" id="cse_search" class="googleSearch" name="q" value="" placeholder="Search" /><input type="submit" class="googleBtn" name="submitBTN" value="" />

But I can't get the auto-complete on that unless I use 3rd party code which doesn't quite do what I need and doesn't have all the results when I implement auto-complete with the WYSIWYG. However, I can't seem to style the google code like

<div id="cse-search-form">Loading</div>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
.load('search', '1', {language : 'en'});
.setOnLoadCallback(function() {
var customSearchOptions = {};
var imageSearchOptions = {};
['enableImageSearch'] = true;
['imageSearchOptions'] = imageSearchOptions;
var customSearchControl = new
'my id:1sc26mxgi04', customSearchOptions);
var options = new;
.setAutoCompletionId('my id:1sc26mxgi04+qptype:1');
.draw('cse-search-form', options);
}, true);

beyond the basics using CSS

What am I missing? Is there away to get the best of both worlds (e.g. use the google custom search code but customize the heck out of it)?