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

yeum 发布于 2019-03-09 css 最后更新 2019-03-09 14:41 3 浏览

看看我的网站下面的图片:www.kokorugs.com 我使用Boostrap,我相信有一些相互冲突的CSS样式。 问题是我看不到Google的CSS,并且无法弄清楚如何覆盖这种样式。

enter image description here 我的代码(谷歌)如下:
        <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;
}
只有谷歌的边界被删除。照片如下: enter image description here
已邀请:

eipsum

赞同来自:

我使用以下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:normal; 做删除文本弹出文本框的工作。 我还记录了Google自定义搜索的修复程序,其中显示了搜索结果标签中的滚动条: http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/

id_sed

赞同来自:

完全纠正冲突使用

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

rut

赞同来自:

您看到的第二个边框实际上不是边框而是盒子阴影。它是由你的bootstrap css添加到所有输入,但不是搜索框所需。你应该通过仅针对搜索框反击它来关闭它。添加这样的东西到你的CSS:

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

veos

赞同来自:

边框是从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;