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

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"]

要阅读有关+选择器的更多信息，请回答“+”（加号）CSS选择器是什么意思？“ 以简短的方式解释它，甚至涵盖浏览器支持。

---

这是一个显示它在行动的片段。 看起来不太漂亮，但做的工作:)

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

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

Answer 2

这是一种使用JQuery的方法，请参阅小提琴https://jsfiddle.net/t33rdra6/2/

  $(document).ready(function() {

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