css - 我想让我的搜索栏像图像一样弹出窗口？

Question

我在一个网站上工作。但我面临与搜索栏相关的问题。我想让我的搜索栏像Image一样弹出窗口。

我认为这可能通过 Javascript 或 Jquery 实现，但我不是这些语言的专家，这就是为什么我不能这样做，我需要你的帮助。所以请帮助我。谢谢。

Answer 1

您实际上并不需要 Javascript。在您链接到的站点中，这是通过这些 CSS 行实现的：

.site-header .search-field {
    background-color: transparent;
    background-image: url(images/search-icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}

.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}

解释：

上面的块将搜索字段设置为width: 0;，有效地使其不可见，但图标除外，该图标位于填充中。它还指示浏览器使用transition线条对宽度属性的任何更改进行动画处理。

下面的块有伪元素:focus，所以它只在搜索字段接收到输入焦点时生效（最常见的是通过点击它）。然后它得到width: 230px;，使它弹出。一旦失去焦点，它就会再次消失，因为width回到0.