5

私のウェブサイトから下の写真を見てください: 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 の境界線だけが削除されました。写真は以下のとおりです。

ここに画像の説明を入力

4

4 に答える 4

3

ボーダーは、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;
于 2013-04-11T16:56:57.693 に答える
1

競合の使用を完全に修正するために

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-27T11:02:06.523 に答える
1

2 番目に表示されている境界線は、実際には境界線ではなく、ボックスの影です。ブートストラップ css によってすべての入力に追加されていますが、検索ボックスには望ましくありません。検索ボックスのみに対抗してオフにする必要があります。次のようなものを css に追加します。

.gsc-input-box input[type="text"] {
  -webkit-box-shadow: none;
  box-shadow: none;
}
于 2013-04-11T16:56:46.037 に答える
0

私は次の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/

于 2014-08-30T15:35:00.203 に答える