将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

在这种情况下，您可以使用adjacent sibling combinator, +。

Example Here

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

作为FelipeAls points out，如果删除了焦点，则无法单击该按钮。因此，你可以这样做：

Example Here

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