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

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

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

要详细了解+选择器，this answer to "What does the “+” (plus sign) CSS selector mean?"会以简短的方式解释它，甚至涵盖浏览器支持。

这是一个显示其实际效果的片段。看起来不太漂亮，但做得很好:)

＆＃13;

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

＆＃13;

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

＆＃13;

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");
      });
  });

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

2 个答案: