谷歌搜索框的自定义 CSS

Question

在我正在尝试构建的网站 (https://www.dynomotion.com/test/index-search.htm) 上，我遇到了 2 个问题：

1. 光标没有完全集中在搜索框内
2. 没有 1px 灰色底边框

有人知道我做错了吗？

对于搜索的样式，我使用以下css：

#cse-search-form {
   position: relative;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   background: #f2f2f2;
   padding: 0;
   margin:0;
}

.gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box,
.gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box-focus {
    height: 25px;  
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius:0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #dadada;
    padding: 0;
    margin:0;
}

任何指针将不胜感激！

谢谢

Answer 1

我发现了您面临的问题。首先，我希望您建议使用 google 开发人员工具来解决此类问题。现在看看搜索栏中的实际问题是什么。

您的搜索栏输入在带有类的表格内

.gsib_a {
    padding: 5px 9px 4px 9px;
}

参考图片。

它有 5 px 的内边距，所以 padding-top 正在推动下面的输入区域。

用以下代码覆盖这个类：-

.gsib_a {
    padding: 0px 9px 4px 9px;
}

这是带有 0px padding-top 的输入区域。这里是图片参考

现在为什么没有灰色的底边框。

您的 div 类

现在解决这个问题：

移除div的高度： 将此 CSS 覆盖为

.gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box, .gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box-focus {
    /* height: 25px; */ remove this height
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 1;
    border: 2x solid #dadada;
    padding: 0;
    margin: 0;
}

已解决的图像：

去掉div的高度。

哇！解决了您的问题。

注意：使用 Google 开发者工具学习这对网络开发者来说真的很有帮助，向 Badal Sherpa 致敬