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/

Answer 2

The border is applied from this section of bootstrap-combined.min.css :

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: #FFF;
border: 1px solid #CCC;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear .2s, box-shadow linear .2s;
-moz-transition: border linear .2s, box-shadow linear .2s;
-o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s;
}

So removing the border shadows will fix this for you:

 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

Or overriding it can help too:

 -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

Answer 3

for complete correction of the conflict use

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
  -webkit-box-shadow: none;
  -moz-box-sizing: content-box;
  box-shadow: none;
}


input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
  box-sizing: content-box;
  line-height: normal;
}

Answer 4

The second border you are seeing is in fact not a border but a box shadow. It is beeing added by your bootstrap css to all inputs, but not desired for the search box. You should turn it off by countering it for the search box only. Add something like this to your css:

.gsc-input-box input[type="text"] {
  -webkit-box-shadow: none;
  box-shadow: none;
}