Question

给出以下HTML和CSS代码：

input[type=text] {
  background-color: red;
}

input[type=text]:focus {
  background-color: white;
}

button[type=submit] {
  background-color: blue;
}

button[type=submit]:focus {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
    <span class="icon-search2"></span>
    </button>
</form>

当我专注于输入[type = text]时，如何激活“ button [type = submit]：focus”？我正在尝试做类似的事情：

input[type=text]:focus {
    background-color: white;
}
button[type=submit]:focus {
    background-color: green;
}

但这不起作用...知道吗？预先感谢！

Answer 1

没有预处理器就无法嵌套这样的CSS。

要输入的焦点是选择下一个按钮元素。您可以使用~ selector：

input[type=text] {
  background-color: red;
}

input[type=text]:focus {
  background-color: white;
}

button[type=submit] {
  background-color: blue;
}

button[type=submit]:focus,
input[type=text]:focus~button[type=submit] {
  background-color: green;
}

<form method="get" id="searchform" action="index.php">
  <input type="text" placeholder="Search..." name="s" id="s" value="" autocomplete="off">
  <button class="search-button" type="submit">
      <span class="icon-search2">Click me</span>
    </button>
</form>

Answer 2

很简单：您不能。您一次只能专注于一个元素。

Source

关注多个元素及其属性

2 个答案: