2

ヘルプ センターに Google カスタム検索を含めようとしています。機能は問題ありませんが、スタイリングはかなり間違っています。

一部のCSSがGoogleスタイルをオーバーライド/干渉しているに違いないと確信していますが、どれがどれかを見つけることができないようです(私が推測するテーブル)。

すなわち：

  1. テキスト入力フィールドは垂直方向の中央揃えではありません。
  2. 検索ボタンが正しく表示されません。

これは私が作業しているサンドボックスへのリンクです。検索バーはヘッダーの下のコンテナにあります: https://acrolinx1429009760.zendesk.com/hc

補足: Zendesk からアクセスできるメインの CSS ファイルは 1 つだけです。

どんな助けでも大歓迎です、ありがとう。

4

3 に答える 3

0

これを試してみてください：

CSS

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
  width: auto; // CHANGED
  height: 28px; // CHANGED
  padding: 6px 27px;
  min-width: 13px;
  margin-top: -1px; // CHANGED
}

.gsc-input-box 
 {
  border: 1px solid #D9D9D9;
  background: #fff;
  height: 28px; // CHANGED
 }

input.gsc-input 
{
  font-size: 19px;
  text-align: center; // ADDED
  padding: 4px 9px;
  border: 1px solid #D9D9D9;
  width: 99%;
}
于 2015-06-15T11:58:06.823 に答える
0

Google カスタム検索では、スタイル シートが自動的に挿入されます。ただし、ここのように要件に応じてカスタマイズできます。余分なスペースとして表示されていた余分な高さを削除しています-

<style type="text/css">
   .gsc-control-cse
    {
        height:20px;
        !important;     
    }
    .gsc-control-cse-en
    {
        height:20px;
        !important;
    }
</style>

……

    <div class="customSearch" style="border:0px solid;margin:-15px;width:30%;height:auto;">
    <script>
      (function() {
        .....
      })();
    </script>
    <gcse:search enableAutoComplete="true"></gcse:search>
    </div>
于 2016-02-22T14:41:13.663 に答える