Размещение и дизайн пользовательского поиска от Google (gcse)

  Поисковая строка - неотъемлемая часть любого сайта. Ее можно расположить в шапке сайта или боковой колонке, а можно разместить поисковую строку в меню или в появляющемся(всплывающем) окне, главное чтобы выглядела она современно и органично вписывалась в общий дизайн.
поту как
  Быстро организовать поиск по сайту можно используя, готовую систему пользовательского поиска (СПП) от Google Inc. Зная необходимые селекторы, с помощью CSS, изменить дизайн поисковой строки и кнопки поиск в форме на собственный подходящий к общему оформлению.
  Данный пост подробно содержит подробное описание и примеры того, как разместить поисковую строку от Гугла в меню сайта или блога и легко изменить ее внешний вид при помощи CSS.

  Для того, чтобы установить поисковую систему от Google на сайт, необходимо зарегистрироваться на сайте Google CSE.

  Далее создать новую систему поиска для своего сайта:



  После успешной регистрации система предложит готовый код для вставки поисковой строки на сайт, предпросмотр и перейти в панель управления для изменения настроек:

  Для того чтобы задать собственный стиль оформления и изменить дизайн формы поиска, в разделе настроек "Внешний вид" на вкладке "Темы", желательно выбрать "Обычный" вид.
  После этого можно кликать "Получить код"

  В итоге получаем два кода - скрипт, который загружает поисковую форму и HTML-тег, в который будет загружаться форма.

<script>
 (function() {
  var cx = 'много цфр и бкв...'; /*идентификатор вашей системы*/
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
   '//www.google.ru/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
 })();
</script>

<gcse:search></gcse:search> /*тег-контейнер*/

Как добавить поисковую строку Google в меню

  Чтобы разместить поисковую строку в блоке или в одном из разделов горизонтального или вертикального меню, достаточно в нужный блок добавить тег-контейнер, который был получен вместе со скриптом поисковой системы Гугла.
  В итоге код будет выглядеть примерно так:

<ul>
 <li><a href="#">Link</a></li>
 <li><a href="#">Link</a></li>
 <li><gcse:search></gcse:search></li> <!--тег контейнер СПП-->
</ul>

  Чтобы в дальнейшем упростить работу с оформлением и расположением, лучше обернуть тег поиска в дополнительный блок, и присвоить ему отдельный класс, например - .search-row. Так будет удобнее вносить изменения в CSS именно для него.
  Форма подгоняется автоматически относительно к ширины родительского блока

Как изменить дизайн формы пользовательского поиска от Google

  Как было показано выше, для размещения поисковой строки на сайте достаточно разместить специальный тег в нужном месте, все остальные HTML-элементы формы поиска и стандартные стили оформления, будут загружены скриптом, что называется, "налету". Однако это не мешает пользователям изменить дизайн формы поиска по собственному усмотрению, применяя собственный CSS, хотя и создает некоторые, вполне решаемые трудности.
  Кстати сказать, используя приведенный ниже пример, можно без труда изменить оформление Blogger-гаджета "Окно поиска", который, по-сути, использует ту же самую СПП от Google.

Чтобы добавленный к СПП персональный CSS был применен правильно, в некоторых случаях, к значениям свойств нужно будет добавить параметр !important.
  А селекторы лучше прописывать с учетом тегов и селекторов родителя:

[тег родителя].[класс] [тег элемента].[класс] {
/*свойства стилей*/
}

  Пример современного оформления формы поиска для сайта от Google, с анимированным появлением поисковой строки и прочими современными наворотами.

  HTML структура блока:

<div id="search-row" class="search-row"><gcse:search></gcse:search></div>

 Пример простого CSS:

/*основной блок*/
#search-row {
    margin: 2% 27%;
    min-height: 48px;
}
/*обнуляем все что только можно*/
form.gsc-search-box * {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
    box-sizing: content-box;
}
form.gsc-search-box {
    border-style: none;
    border-width: 0;
    border-spacing: 0 0;
    width: 100%;
    margin-bottom: 2px;
}
.gsc-input-box {
    border: 1px solid #D9D9D9 !important;
}
div.gsc-control-cse,
form.gsc-search-box,
table.gsc-search-box {
    position: relative;
}
/*если хочется анимируем элементы*/
form.gsc-search-box *,
form.gsc-search-box *::before {
    transition: all ease 1s;
    padding: 0 !important;
}
/*добавим надпись на инпуте о том, что это поиск*/
.gsc-input-box::before {
    content: 'Search...';
    color: #999;
    position: absolute;
    top: 10px;
    left: 5px;
    font-size: 32px;
}
/*изменим надпись при наведении на форму поиска*/
form.gsc-search-box:hover .gsc-input-box::before {
    content: 'Ask me!';
}
/*стили для поля запроса*/
td.gsc-input > .gsc-input-box input {
    position: relative;
    background: transparent !important;
    background-image: none !important;
    padding: 0 5px !important;
    border: none;
    border-bottom: 5px solid transparent;
    color: #000;
    cursor: pointer;
    font-size: 32px;
    min-height: 48px;
    width: 97% !important;
}
td.gsc-input:hover > .gsc-input-box input {
    border-bottom: 5px solid #BBBABA;
    color: #000;
    cursor: text;
    margin-left: 0;
}
/*инпут в фокусе при введении запроса*/
td.gsc-input > .gsc-input-box input:focus {
    border-bottom: 5px solid #BBBABA;
background-color: #fff !important;
    color: #000;
    cursor: text;
    width: 98%;
    margin-left: 0;
}
/*кнопка с лупой для отправки запроса*/
 td.gsc-search-button > .gsc-search-button-v2,
 td.gsc-search-button > .gsc-search-button-v2:focus {
    background-color: #4d90fe !important;
    display: block;
outline: none !important;
    background-position: 50% 50%;
    background-color: transparent;
    font: normal normal 0 sans-serif;
    color: transparent;
    border: 8px solid transparent;
padding: 0 !important;
    height: 34px;
    min-width: 34px;
    width: 34px;
}
 td.gsc-search-button > .gsc-search-button-v2:hover {
    background-color: #AECEF5 !important;
}
.gsc-search-button-v2 > svg {
    -ms-zoom: 2.5;
    transform: scale(2.5);
}
/*скрываем все лишнее*/
.gsc-branding, 
.gcsc-branding,
td.gsib_b {
    display: none;
}

  В итоге должно получится так:
ПРИМЕР
P.S. Пример желательно смотреть через современные браузеры, потому как для "старичков" я особо не заморачивался.

  На этом все. Дальнейшие изыскания целиком зависят от фантазии соискателей и знаний полученных ими при изучении свойств каскадных таблиц стилей.