Google Search Input Box Conflicting Bootstrap CSS

Anil Gupta  31 Aug, 18      4  Tech Tips

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.

Google custom search input box CSS bootstrap conflict

Google search input box conflicting Bootstrap CSS spoils the look

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*/

Removed Google custom search input box - Twitter bootstrap conflict

Removed Google custom search input box – Twitter bootstrap conflict

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.

   Read all 4 Q & A

  1. feztheforeigner   15 Jan, 15 at 4:24 pm

    This helped tremendously, thank you so much for sharing!

    I do still have one issue, however, I am having trouble with the search box skipping a line. It is nested in my (bootstrap) header but causes a lot of awkwardness from skipping a line (see screenshot.)

    Do you have any suggestions on how to fix this? I tried nowrap an but neither seemed to work…

  2. Ken Haskins   21 Dec, 14 at 12:57 pm

    Just wanted to say thanks for this tutorial. My head was about to explode. You don’t know how many times I combed over my CSS thinking that something was wrong. Never knew that Bootstrap was the conflicting issue. Working fine now. Thanks again!