Chrome中的绝对定位输入字段

Question

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

但不知何故，即使我没有点击该字段，该字段也会获得焦点。

这是一个演示：http://gaming-corp.de/

如果您尝试单击顶部搜索按钮正下方的白色内容区域，无论如何它都会聚焦它。这只发生在 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;
}

Answer 1

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

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

由于.container 和.row 都不需要像那样清除，我建议您删除该代码。