将CSS应用于焦点上的输入容器

Question

我有一个带有输入字段和内部按钮的div.我希望隐藏按钮,直到用户专注于输入.

我试图在包含div上使用:focus伪类,因为我认为它会在重点关注输入时继承,但它不起作用.

这是我的HTML

<div class="search">
    <input type="text" placeholder="Search..." />
    <button type="submit">Search</button>
</div>

这是我已经尝试过的CSS

.search button {
    display: none;
}

.search:focus button {
    display: block;
}

没有JavaScript可以做到这一点吗？

Answer 1

在这种情况下,您可以使用相邻的兄弟组合器+.

这里的例子

.search input:focus + button {
    display: block;
}

但是,正如FelipeAls指出的那样,如果移除焦点,则无法单击该按钮.因此,你可以做这样的事情:

这里的例子

.search button:hover,
.search button:focus {
    display:block;
}