Remove conflicting styling - Bootstrap & Google Cu

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 is that I cannot see Google's CSS and can't figure out how to override this styling.

My code (from google) is below:

        <aside class="box" style="padding:10px 0;">

            <script>
              (function() {
                var cx = '009058734720051694368:e41h4lf-hsk';
                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> 


        </aside>

My CSS for the "box" class is irrelevant but I will include it to avoid any questions:

.box {
background: #ffffff;
border: 2px solid #bcd78d;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-top: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}

I appreciate any help in removing this double border. Thank you!

UPDATE:

When I tried this CSS rule:

* {
    border: none !important;
}

only Google's border was removed. The picture is below:

Answer 1

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;
}

Answer 2

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 3

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 4

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;