当输入焦点时如何设置表单元素的样式？

Question

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

例如：

<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

如果实际代码中的结构与您发布的相关代码相同，则+当焦点位于文本输入时，您可以使用（相邻）选择器选择提交按钮。

\n\n

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

\n\n

要了解有关+选择器的更多信息，请参阅“\xe2\x80\x9c+\xe2\x80\x9d（加号）CSS 选择器是什么意思？”的答案。对其进行了简短的解释，甚至涵盖了浏览器支持。

\n\n\n\n

这是一个展示其实际效果的片段。看起来不太漂亮，但可以完成工作:)

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n