CSS Google 自定义搜索框的样式问题

Question

我正尝试在我们的帮助中心添加 Google 自定义搜索。功能还行，就是风格有点不对。

我很确定某些 CSS 必须 overriding/interfering 具有 Google 样式，但我似乎无法找出哪些（我猜是表格）。

更具体地说：

文本输入字段不是垂直的center-aligned。
搜索按钮显示不正确。

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

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

非常感谢任何帮助，谢谢。

Answer 1

为第二期添加 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;
}

Answer 2

试试这个它一定有效：

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

Answer 3

Google 自定义搜索自动插入他们的样式 sheet。但是你可以根据你的要求自定义它，就像这里我删除了显示为额外 space-

的额外高度

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

CSS Google 自定义搜索框的样式问题

CSS issue with styling the Google custom search box

css

zendesk

google-custom-search