Google Search Input Box Conflicting Bootstrap CSS

If you use the Google custom search on your website like us, along with the latest version (currently 3.3.7) Twitter Bootstrap CSS, you most probably would have seen the conflicting CSS rules.

This Google search Input box conflicting Bootstrap (works for 3.* and 4.* ) CSS creates 2 issues:

1. Google Custom Search Input Box and Search ButtonThe input box’s text pops out of the text box and the Google search button squeezes. When the user types the text, it looks awkward as there is no input box boundary visible.On the other side, the search icon on the search button is missing. It just simply shows blue color button which appears squeezed to lesser height than required.
2. Google custom search results tabsIf you have selected to show the web search results as well as the image search from your web site, Google custom search creates two tabs.
   These 2 tabs show scroll bars in their tab headers instead of showing the text ‘Web’ and ‘Image’.The problem is the conflict created by Google search custom CSS that can’t be modified.

I tried searching a lot on the Google and found some help here on the stack-overflow discussion for the first issue. But, the second one was still a mystery.

Here is what I have tried to fix the issue and you can see it working now on this website.

Remove conflicting Bootstrap CSS styling with Google Custom Search

As you know that Google custom search downloads its own styles, they conflict with the Bootstrap ones.

So, the idea is to override the Custom Search’s CSS by adding these styles in your theme’s style.css. The code in red is important.

1. To fix the Google Search Input Box and Button CSS conflict:
   /*AM22 - To make google search box appear correct - START*/
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button
{
box-sizing: content-box;
line-height: normal;
}
/*AM22 - To make google search box appear correct - END*/

2. To remove the scroll bars from Google Search results tabs:
   /*AM22 - To make google search results tabs appear correct - START*/
.gsc-tabsArea div
{
/*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
overflow: visible;
}
/*AM22 - To make google search results tabs appear correct - END*/


Where to add this CSS code?

You do not need to change Bootstrap CSS in this case.

If you are using WordPress, just add it in the header.php.
It is possible that you are using a theme which internally uses bootstrap CSS. In this case, you would have to add the above CSS rules in your theme’s specific style.css.

Note that the idea is to simply override the CSS rules specific to Google’s CSS. Google’s CSS is added dynamically to your web page and hence it can’t be modified.

If you are just using the Bootstrap’s CDN link to load it for your website, you should add the above code to all web pages’s head inside the

<style> ABOVE MENTIONED CSS RULES </style> tag.