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

我有一个div，里面有一个输入字段和一个按钮。我想隐藏按钮，直到用户关注输入

我曾尝试在包含div的地方使用：focus伪类，因为我认为它在关注输入时会被继承，但它不起作用

这是我的html

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

---

是否可以在没有JavaScript的情况下执行此操作？

在这种情况下，您可以使用

但是，如果焦点被移除，则无法单击按钮。因此，除此之外，您还可以执行以下操作：

---

太好了，非常感谢。我将在13分钟内标记为答案：）很好，直到您尝试达到此按钮（编辑：通过选项卡）。。。然后输入不再聚焦，按钮回到隐藏状态：（@FelipeAls您是对的，但是此按钮将作为禁用JavaScript的用户的备用按钮。在这种情况下，当启用JavaScript时，将有另一个按钮覆盖此按钮，因此我不太担心它不完全实用。使用鼠标单击按钮时，上述操作会起作用。。但是当我按下选项卡k时ey按钮消失..为此，我们可以使用附加样式..

.search按钮：focus{display:block；}

..这样，在切换按钮时，按钮也会出现..@soundar很好的一点，我忘记了：）谢谢你提到这一点。

.search button {
    display: none;
}

.search:focus button {
    display: block;
}

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

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