Html Chrome中的绝对定位输入字段

我想在我的导航栏中创建一个搜索表单，它将在焦点上展开

但不知何故，即使我没有点击进入这个领域，这个领域也会得到关注

下面是一个演示：

如果您尝试单击顶部搜索按钮正下方的白色内容区域，它仍会将其聚焦。这只发生在铬合金中

有人知道是什么导致了这一点，以及如何修复它吗

多谢各位

编辑：

代码如下：

form#search {
    position: relative;
}

form#search input {
    width: 0;
    height: 40px;
    padding: 0 0px 0 40px;
    cursor: pointer;
    border: 0;
    background: transparent url(../images/search.png) no-repeat 10px center;
    outline: none;
    position: absolute;
    right: 40px;
    top: 20px;
    transition: all .6s;
    font-size: 12px;
}

form#search input:focus {
    background-color: #fff;
    color: #666;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
    width: 100px;
}

---

我不知道为什么，但这似乎是由“clearfix”代码引起的：

---

既然

.container

和

.row

都不需要这样清除，我建议您删除该代码。

链接到随机页面？嗯。最好在这里发布代码。对我来说没关系，试着禁用你的chrome扩展进行测试似乎与

位置：绝对

编辑有关。冷静点，我想给你举个例子。正如你所看到的，没有广告或其他东西，那么我为什么要在我的页面上欺骗你呢？就是这样刚刚添加了一个可见性：隐藏；

.container:after, .row:after {
  display: block;
  width: 100%;
  height: 0px;
  content: ".";
  overflow: hidden;
  clear: both;
}