Question

我试图在我们的帮助中心加入Google自定义搜索。功能还可以，但造型很不错。

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

更具体地说：

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

这是我正在使用的沙箱的链接，搜索栏位于标题下方的容器中：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自定义搜索会自动插入其样式表。但你可以根据你的要求自定义它，就像这里我正在移除额外的空间 - 这是一个额外的空间 -

Http.Response

...

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

设置Google自定义搜索框的CSS问题

3 个答案: