は相反するスタイリング削除 - ブートストラップ＆Googleカスタム検索

Question

を私のウェブサイトから以下の絵を見てみましょう：www.kokorugs.com

私はブートストラップを使用していますが、私はいくつかの矛盾CSSスタイルがあると信じています。

問題は、GoogleのCSSが表示されず、このスタイル設定を上書きする方法がわからないことです。

（Googleの）私のコードは以下の通りです： "ボックス" クラスの

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

* { 
    border: none !important; 
} 

のみ、Googleの境界線が削除されました。私はこのCSSルールを試してみました

。画像は以下の通りです：

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によってすべての入力に追加されたbeeingですが、検索ボックスには望ましくありません。あなたは、それを検索ボックスのためだけに反対することによってオフにする必要があります。あなたの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; 
} 

---

行の高さ：ノーマル;

テキストボックスからポップするテキストを削除する作業を行います。 http://www.am22tech.com/google-custom-search-input-box-conflicting-bootstrap-css/