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行为width属性添加任何更改动画。

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

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

1 个答案: