Question

看看我的网站下面的图片：www.kokorugs.com

我使用的自举。我相信，有一些冲突的CSS样式。

问题是我看不到谷歌的CSS，不知道如何覆盖这个样式。

我的代码（从谷歌）低于：

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

我对 “盒子” 类CSS是无关紧要的，但我会包括它来避免任何提问：

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

我明白任何帮助消除这个双边框。谢谢！

UPDATE：

当我尝试这样做的CSS规则：

* { 
    border: none !important; 
} 

只有谷歌的边框被删除。图片低于：

Answer 1

边框从引导-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; 
} 

所以去除边框阴影会解决这个问题为您：

-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-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 

Answer 2

你所看到的第二边框其实不是一个边框，但一个盒子阴影。它是由引导CSS添加到所有输入，但不是搜索框所需的。您应该通过仅在搜索框中将其关闭来关闭它。加入这样的事情你的CSS：

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

Answer 3

的冲突完全矫正用

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

我用下面的CSS和它的作品对我来说：

.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：正常;

做的工作删除文本弹出文本框。

我也记录显示在这里搜索结果标签的滚动条为谷歌定制搜索的修补程序： http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/