Remove conflicting styling - Bootstrap & Google Custom Search

Question

Take a look at the picture below from my website: www.kokorugs.com

I am using Boostrap and I believe that there are some conflicting CSS styles.

The problem

Answer 1

I use the following CSS and it works for me:

.gsc-input-box input[type="text"], .gsc-input-box input[type="text"]:focus, .gsc-input-box input[type="text"]:active {
  -webkit-box-shadow: none;
  box-shadow: none;
    line-height: normal;
}

---

line-height: normal;

does the work of removing the text popping out of text box.

I have also documented the fix for Google custom search showing scroll bars in search results tab here: http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/