It’s driving me nuts just to implement custom google search box into my website.
Because bootstrap overide the CSS, so here’s the solution
Get your Google Custom Search here https://www.google.com/cse/
[code]
<script>
(function() {
var cx = ‘input your own’; // Insert your own Custom Search engine ID here
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>
[/code]
You need to override the box sizing for some of these external tools. Wrap them in a class (as shown below) or reset it on the individual elements.
[code]
.reset-box-sizing,
.reset-box-sizing * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
[/code]
Place this code in your desire page, don’t forget to Insert your own Custom Search engine ID
[code]
<!–Google Search Box –>
<div class="reset-box-sizing">
<script>
(function() {
var cx = ‘016229615269930760747:za-ifkbiyuy’; // Insert your own Custom Search engine ID here
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>
<!–Google Search Box –>
[/code]
In your CSS
[code]
.reset-box-sizing,
.reset-box-sizing * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
[/code]