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

解释:

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

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