html - 如何在输入聚焦时设置表单元素的样式？

Question

我有一个结构类似于下面的表单。当 input[type=text] 获得焦点时，如何使用 CSS 设置 input[type=submit] 元素的样式？

例如:

<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>

<style>
    #example > input[type="text"]:focus {
        // please style input[type="submit"]
    }
</style>

我正在尝试完成此操作，因为 wordpress 主题有一个搜索表单，其中包含内嵌的搜索输入和提交按钮。当用户专注于输入时，我希望输入字段和提交按钮具有相同的边框颜色变化。

或者，我可以围绕输入和提交按钮设置整个 div 的样式，但随后我们会回到在一个元素获得焦点时设置另一个元素样式的问题。

这甚至可以通过 CSS3 实现，还是我必须求助于 javascript 函数？ (最后的手段。)

Answer 1

如果您实际代码中的结构与您发布的问题相同，您可以使用 +(相邻的)选择器在文本输入上选择提交按钮。

这是您正在寻找的选择器:#example > input[type="text"]:focus + input[type="submit"]

要阅读更多关于 + 选择器的信息，this answer to "What does the “+” (plus sign) CSS selector mean?"以简短的方式对其进行了解释，甚至涵盖了浏览器支持。

---

这是一个片段来展示它的实际效果。看起来不太漂亮，但确实有用:)

#example > input[type="text"]:focus + input[type="submit"] {
  background: gray;
}

<form id="example">
    <input type="text" name="search">
    <input type="submit" value="Search">
</form>