title: Bootstrap design on google search box
body: <p>How can i personalize the basic Google Search Box with a simple bootstrap design? I want my search box look like <a href="http://i.imgur.com/ngusERJ.png" rel="nofollow">this</a>. </p>
  
  <p>Here is the html where I want to include the search </p>
  
  <blockquote>
  <pre><code>          &lt;form class="navbar-form" role="search"&gt;
                    &lt;div class="input-group"&gt;
                        &lt;input type="text" class="form-control" placeholder="Cautare" name="q"&gt;
                        &lt;div class="input-group-btn"&gt;
                            &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
  </code></pre>
  </blockquote>
  
  <p>Here is the basic google css and java script.</p>
  
  <p>And look like <a href="http://i.imgur.com/BLRPtGA.png" rel="nofollow">this</a>.</p>
  
  <p>I try many things. Maybe for you it's simple so please do not criticize me because I did not know anything about javascript.</p>
  
  <pre><code>                &lt;ul class="nav navbar-nav navbar-left nav-search"&gt;
                      &lt;div id='cse' style='width: 100%;'&gt;Loading&lt;/div&gt;
                  &lt;script src='//www.google.com/jsapi' type='text/javascript'&gt;&lt;/script&gt;
  
                  &lt;script type='text/javascript'&gt;
                  google.load('search', '1', {language: 'ro', style: google.loader.themes.V2_DEFAULT});
                  google.setOnLoadCallback(function() {
                    var customSearchOptions = {};
                    var orderByOptions = {};
                    orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
                    customSearchOptions['enableOrderBy'] = true;
                    customSearchOptions['orderByOptions'] = orderByOptions;
                    customSearchOptions['overlayResults'] = true;
                    var customSearchControl =   new google.search.CustomSearchControl('014984999857089792589:fqyliftt9go', customSearchOptions);
                    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
                    var options = new google.search.DrawOptions();
                    options.setAutoComplete(true);
                    customSearchControl.draw('cse', options);
                  }, true);
                  &lt;/script&gt;
  &lt;style type='text/css'&gt;
    .gsc-control-cse {
      font-family: Arial, sans-serif;
      border-color: #FFFFFF;
      background-color: transparent;
    }
    .gsc-control-cse .gsc-table-result {
      font-family: Arial, sans-serif;
    }
    input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
      border-color: #D9D9D9;
    }
    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
      border-color: #666666;
      background-color: #CECECE;
      background-image: none;
      filter: none;
  
    }
    .gsc-tabHeader.gsc-tabhInactive {
      border-color: #FF9900;
      background-color: #FFFFFF;
    }
    .gsc-tabHeader.gsc-tabhActive {
      border-color: #E9E9E9;
      background-color: #E9E9E9;
      border-bottom-color: #FF9900
    }
    .gsc-tabsArea {
      border-color: #FF9900;
    }
    .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
      border-color: #FFFFFF;
      background-color: #FFFFFF;
    }
    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover {
      border-color: #FFFFFF;
      background-color: #FFFFFF;
    }
    .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b  {
      color: #0000CC;
    }
    .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b {
      color: #0000CC;
    }
    .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b {
      color: #0000CC;
    }
    .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b {
      color: #0000CC;
    }
    .gsc-cursor-page {
      color: #0000CC;
    }
    a.gsc-trailing-more-results:link {
      color: #0000CC;
    }
    .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {
      color: #000000;
    }
    .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
      color: #008000;
    }
    .gs-webResult div.gs-visibleUrl-short {
      color: #008000;
    }
    .gs-webResult div.gs-visibleUrl-short  {
      display: none;
    }
    .gs-webResult div.gs-visibleUrl-long {
      display: block;
    }
    .gs-promotion div.gs-visibleUrl-short {
      display: none;
    }
    .gs-promotion div.gs-visibleUrl-long  {
      display: block;
    }
    .gsc-cursor-box {
      border-color: #FFFFFF;
    }
    .gsc-results .gsc-cursor-box .gsc-cursor-page {
      border-color: #E9E9E9;
      background-color: #FFFFFF;
      color: #0000CC;
    }
    .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
      border-color: #FF9900;
      background-color: #FFFFFF;
      color: #0000CC;
    }
    .gsc-webResult.gsc-result.gsc-promotion {
      border-color: #336699;
      background-color: #FFFFFF;
    }
    .gsc-completion-title {
      color: #0000CC;
    }
    .gsc-completion-snippet {
      color: #000000;
    }
    .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link  {
      color: #0000CC;
    }
    .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited {
      color: #0000CC;
    }
    .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover  {
      color: #0000CC;
    }
    .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active {
      color: #0000CC;
    }
    .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * {
      color: #000000;
    }
    .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short  {
      color: #008000;
    }
  &lt;/style&gt;
                  &lt;/ul&gt;
  </code></pre>