Style Google Search Bar

HTML:

<div class="search_wrapper"> <script> (function() { var cx = '002216089805526689634:pz3izh0pvfc'; 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:search></gcse:search> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="search_wrapper"> <script>   (function() { var cx = '002216089805526689634:pz3izh0pvfc'; 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:search></gcse:search> </div>

CSS:

.search_wrapper { margin-top: -4px; } .search_wrapper form.gsc-search-box{ width:200px; } .search_wrapper .cse .gsc-control-cse, .gsc-control-cse{ padding: 0px!important; background: transparent!important; border: 0!important; } .search_wrapper input.gsc-input{ font-size: 13px; } .search_wrapper input.gsc-search-button{ margin: 5px 5px 0 0; padding: 3px; width: 20px; height: 20px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.search_wrapper { margin-top: -4px; } .search_wrapper form.gsc-search-box{ width:200px; } .search_wrapper .cse .gsc-control-cse, .gsc-control-cse{ padding: 0px!important; background: transparent!important; border: 0!important; } .search_wrapper input.gsc-input{ font-size: 13px; } .search_wrapper input.gsc-search-button{ margin: 5px 5px 0 0; padding: 3px; width: 20px; height: 20px; }

Reference:

https://www.google.com/cse/