刪除衝突的造型 - Bootstrap與谷歌自定義搜索

看看我的網站下面的圖片：www.kokorugs.com刪除衝突的造型 - Bootstrap與谷歌自定義搜索

我使用的自舉。我相信，有一些衝突的CSS樣式。

問題是我看不到谷歌的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; 
}

我明白任何幫助消除這個雙邊框。謝謝！

UPDATE：

當我嘗試這樣做的CSS規則：

* { 
    border: none !important; 
}

只有谷歌的邊框被刪除。圖片低於：

enter image description here

來源

2013-04-11 Raphael Rafatpanah

邊框從引導-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;

來源

2013-04-11 16:56:57 Omega

進展良好。看看這個jsFiddle：http://jsfiddle.net/SKrTF/ -----陰影現在消失了，但重點仍然存在，它與谷歌的框重疊。有任何想法嗎？ – 2013-04-11 17:02:30

焦點刪除：http://jsfiddle.net/SKrTF/1/只是現在的重疊 – 2013-04-11 17:05:25

太棒了！只需要在輸入框中添加'margin-top：-1px;'即可。例如'＃gs_tti0>輸入{margin-top：-1px！important;}'。看到這裏：http://jsfiddle.net/SKrTF/3/ – Omega 2013-04-11 17:09:31

你所看到的第二邊框其實不是一個邊框，但一個盒子陰影。它是由引導CSS添加到所有輸入，但不是搜索框所需的。您應該通過僅在搜索框中將其關閉來關閉它。加入這樣的事情你的CSS：

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

來源

2013-04-11 16:56:46 Pevara

良好的進展。看看這個jsFiddle：jsfiddle.net/SKrTF -----陰影現在消失了，但重點仍然存在，它與谷歌的框重疊。有任何想法嗎？ – 2013-04-11 17:03:37

重點刪除：http://jsfiddle.net/SKrTF/1/只是重疊現在 – 2013-04-11 17:05:02

你是什麼意思重疊？ – Pevara 2013-04-11 17:15:44

的衝突完全矯正用

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

來源

2014-06-27 11:02:06 user3782847

謝謝！我沒有意識到盒子尺寸是我的敵人。 – Salketer 2015-05-20 18:25:24

我用下面的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/

來源

2014-08-30 15:35:00

回答

相關問題