javascript - Bootstrap design on google search box -

how can personalize basic google search box simple bootstrap design? want search box this.

here html want include search

          <form class="navbar-form" role="search">                   <div class="input-group">                       <input type="text" class="form-control" placeholder="cautare" name="q">                       <div class="input-group-btn">                           <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>                       </div>                   </div>               </form> 

here basic google css , java script.

and this.

i try many things. maybe it's simple please not criticize me because did not know javascript.

                <ul class="nav navbar-nav navbar-left nav-search">                     <div id='cse' style='width: 100%;'>loading</div>                 <script src='//www.google.com/jsapi' type='text/javascript'></script>                  <script type='text/javascript'>                 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);                 </script> <style type='text/css'>   .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;   } </style>                 </ul> 

you can have @ below link. let me know if working fine you.

http://jsfiddle.net/xfzfq/614/

<div class="col-sm-3 col-md-3 pull-right">         <form class="navbar-form" role="search">         <div class="input-group">             <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term">             <div class="input-group-btn">                 <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>             </div>         </div>         </form>         </div>