2

我正在尝试将 Google 自定义搜索纳入我们的帮助中心。功能还可以，但是样式很不对。

我很确定某些 CSS 必须覆盖/干扰 Google 样式，但我似乎无法找出哪些 CSS（我猜是表格）。

进一步来说：

  1. 文本输入字段不是垂直居中对齐的。
  2. 搜索按钮未正确显示。

这是我正在使用的沙箱的链接，搜索栏位于标题下方的容器中：https ://acrolinx1429009760.zendesk.com/hc

旁注：我只能从 Zendesk 访问一个主要的 CSS 文件。

任何帮助将不胜感激，谢谢。

4

3 回答 3

6

添加box-sizing: content-box;到.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2第二个问题。

如果您想将输入字段中的文本居中对齐（我不建议这样做！），请将 text-align center 添加到该元素。我不推荐这样做，因为人们习惯于将搜索框中的文本左对齐。相反，我会让您的搜索栏更小。

所以总的来说，添加这个CSS：

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {text-align: center;}

不过，正如我所说，我建议省略最后一行并使输入更小。像这样的东西：

#cse {
    width: 60%; /* make sure you don't use inline width */
    margin: 0 auto;
}
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
于 2015-06-15T11:12:45.093 回答
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

谷歌自定义搜索会自动插入他们的样式表。但是您可以根据您的要求对其进行自定义，例如这里我正在删除显示为额外空间的额外高度-

<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 回答