删除冲突的样式 - Bootstrap 和 Google 自定义搜索答案

【问题标题】：Remove conflicting styling - Bootstrap & Google Custom Search删除冲突的样式 - Bootstrap 和 Google 自定义搜索
【发布时间】：2013-04-03 23:29:11
【问题描述】：

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

我正在使用 Boostrap，我认为存在一些冲突的 CSS 样式。

问题是我看不到 Google 的 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;
}

感谢您在删除此双边框方面提供的任何帮助。谢谢！

更新：

当我尝试这条 CSS 规则时：

* {
    border: none !important;
}

仅删除了 Google 的边框。图片如下：

【问题讨论】：

标签： css twitter-bootstrap google-search

【解决方案1】：

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

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

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

【讨论】：

进展顺利。看看这个 jsFiddle：jsfiddle.net/SKrTF -----阴影现在消失了，但焦点仍然存在，它与 google 的框重叠。有什么想法吗？
太棒了！只需在输入框中添加margin-top:-1px;即可。例如#gs_tti0 > input {margin-top:-1px !important;}。见这里：jsfiddle.net/SKrTF/3
好消息是，在我的网站上，问题已解决。我唯一不明白的是，在 jsFiddle 上，bootstrap 的样式与 Google 的样式重叠。 margin-top: -1px 也不起作用。但我想 jsFiddle 可能有点奇怪。如果您有任何想法，请告诉我！现在，我会标记答案，因为从技术上讲，我的原始问题已得到回答 =)
谢谢！ {margin-top:-1px !important;} 为我修复了重叠，即使在 jsfiddle 上也是如此。你检查过这个 jsfiddle.net/SKrTF/3 吗？

【解决方案2】：

您看到的第二个边框实际上不是边框而是盒子阴影。它由您的引导 css 添加到所有输入，但搜索框不需要。您应该通过仅针对搜索框对其进行反击来将其关闭。将这样的内容添加到您的 css 中：

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

【讨论】：

进展顺利。看看这个jsFiddle：jsfiddle.net/SKrTF -----阴影现在消失了，但焦点仍然存在，它与google的框重叠。有什么想法吗？
重叠是什么意思？
在 jsFiddle 中看不到吗？ jsfiddle.net/SKrTF/1 ---似乎引导样式与谷歌的输入框重叠。谷歌的绿色框边框被 bootstrap 现在全白的输入隐藏在底部。

【解决方案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;
}

【讨论】：

谢谢！！我没有意识到 box-sizing 是我的敌人。

【解决方案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;
}

行高：正常；

删除文本框弹出的文本。

我还记录了 Google 自定义搜索在搜索结果选项卡中显示滚动条的修复： http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/

【讨论】：