How do you customize Google Custom Search Engine (CSE)?

Have you tried to customize the Google CSE search box to fit your website theme, and having difficulty implementing it? You're not alone. I've browsed Google CSE documentation for some time, but this information is buried under the hood and took me a while to figure this out. This is a 2-page Search & Results page design. You'll style the form element how ever you wish to design.

Search Box:

<form id="cse-search-box" class="search" title="CSE Search" 
    action="/search-results.html">
<input type="text" name="q" size="" />
<input type="submit" name="sa" value="go" />
</form>

Search Results: Get this code from your CSE control panel.

<script>
(function() {
var cx = '012345678901234567890abcdefghijkl';
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>
<gcse:searchresults-only linktarget="_self"></gcse:searchresults-only>