谷歌搜索框的自定义css

如何解决谷歌搜索框的自定义css

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

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

任何指针将不胜感激！

谢谢

解决方法

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

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

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

查看图片以供参考。

它的内边距为 5 像素，因此内边距顶部将输入区域推到下方。

覆盖这个类：-

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

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

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

您的类

现在解决这个问题：

去除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 Developers Tools 这对网络开发者真的很有帮助，问候 Badal Sherpa