删除冲突的样式 - Bootstrap& Google自定义搜索 [英] Remove conflicting styling - Bootstrap & Google Custom Search

问题描述

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

我使用Boostrap，我相信有一些冲突的CSS样式。 / p>

问题是我看不到Google的CSS，无法找出如何覆写这种样式。

我的代码（来自google ）如下：

 < aside class =boxstyle =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的框类是无关的，但我会包括它，以避免任何问题： / p>



  .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的边框已移除。图片如下：

解决方案

边框应用于bootstrap-combined.min.css的这一部分：

  textarea，input [type =text]，input [type =password]，input [type =datetime]，input [type =datetime 输入[type =week]，输入[type =date]，输入[type =month]，输入[type =email]，输入[type =url]，输入[type =search]，输入[type =tel]， 
 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; 
  

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:

解决方案

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;

这篇关于删除冲突的样式 - Bootstrap& Google自定义搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！