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

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

这里有一个使用JQuery的方法，见fiddle https://jsfiddle.net/t33rdra6/2/

  $(document).ready(function() {

    $('input').blur(function() {
        $('input[type="submit"]').removeClass("focus")
      })
      .focus(function() {
        $('input[type="submit"]').addClass("focus");
      });
  });

Answer 2

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

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

要了解更多关于+ 选择器的信息，this answer to "What does the “+” (plus sign) CSS selector mean?" 会简短地解释它，甚至包括浏览器支持。

---

这里有一个 sn-p 来展示它的实际效果。看起来不太漂亮，但确实有效:)

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

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