Рассмотрим, как вставить поиск google к себе на сайт. А затем настроим внешний вид формы (кастомизируем) google custom search (cse). У меня получилось форма, как на картинке.

Здесь google custom search подробно описан API google custom search. Получить код поиска google для вставки к себе на сайт можно по этой ссылке http://www.google.com/cse/all.

Сначала нужно добавить поисковую систему, ввести url (домен) вашего сайта. Указать дополнительные настройки, если нужно, и скопировать код в структуру своего сайта.

На вкладке внешний вид можно выбрать наиболее подходящую для сайта тему. Также дополнительно можно изменять цвет фона и цвет границ элементов. Google позволяет изменить достаточно много настроек для Google Search Engine.

Из интересных плюшек еще есть:

• можно разделить форму поиска и форму результатов. С формы поиска выставить url на страницу с формой результатов. Я сделал так у себя. Справа располагается форма поиска, при поиске редиректит на основную страницу с результатами. Поисковая строка при этом передаётся get параметром.
• можно указать callback функцию, которая выполнится после загрузки формы. Это сейчас рассмотрим подробней!

Для кастомизации google search engine нам нужно добавить свои стили к элементам формы. Google подтягивает свою js`ку и форма рендерится javascript`ом в браузере. Поэтому по document.ready() мы не сможем отследить, что форма появилась на странице. Когда документ загружен, google search ещё нету!

Чтобы вовремя стилизовать google search форму, нам нужно отследить, когда она появляется на странице. Проще всего это сделать штатными средствами, а именно передавать имя callback-функции.  window.__gcse параметр callback. В этой callback функции можно подменить элементы, добавить свои стили или классы. Т.е. можно делать с формой всё что хотите.

На примере:

<script>
    var myCallback = function() {
        $('#___gcse_0 .gsc-clear-button').remove();
        $('#___gcse_0 .gsc-search-button').removeClass('gsc-search-button').addClass('button');
    window.__gcse = {
        callback: myCallback
    };
    (function() {
        var cx = '006276629363823089733:WMX-1230223571';
        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:searchbox-only></gcse:searchbox-only>

В функции myCallback я удалил крестик справа c помощью строки:

	$('#___gcse_0 .gsc-clear-button').remove();

т.к. он занимает пространство, которого и так мало в правом блоке. Так же стилизовал кнопку, добавив свой класс button. Можно удалить текст 'Google пользовательский поиск'. Правда, если затем установить фокус на поле поиска и фокус убрать, текст 'Google пользовательский поиск' снова появится, т.к. выставляется кодом с javascript-файла. Тогда нужно навешивать свои обработчики. Но, стоит ли овчинка выделки?

Надеюсь, статья кому то окажется полезной. И кто-то подключит пользовательский google поиск к своему сайту. Это быстро и не нужно будет писать много своего кода. Минусы в использовании google search engine для своего сайта вижу только два:

1. невозможно кардинально изменить показ результатов поиска. Т.е. по-разному показывать различные типы контента, такие как: пользователи, статьи, теги и т.д.
2. отсутствует возможность найти непроиндексированный поисковиком контент.

UPD 2022: По состояния на 2022 год информация выше немного устарела.

скрипт www.google.com/cse/cse.js -- более не нужен. Теперь форму поиска и результатов google можно вставить так:

<script async src="https://cse.google.com/cse.js?cx=ddf78bf2e86a1a751"></script>
<div class="gcse-search"></div>

Таким образом можно вставить только форму поиска, без результатов. Чтобы результаты поиска отображались на отдельной странице, указанной в аттрибуте data-resultsUrl.

<script async src="https://cse.google.com/cse.js?cx=ddf78bf2e86a1a751"></script>
<div class="gcse-searchbox-only"
     data-resultsUrl="/search"
     data-newWindow="true"
     data-queryParameterName="q"
></div>

Читайте официальную документацию google по пользовательскому google search, там все подробно расписано.