关注多个元素及其属性

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

很简单：你做不到。您一次只能关注一个元素。

Source

Answer 2

如果没有预处理器，你不能像这样嵌套 CSS。

您想要的是 select 输入焦点位于下一个按钮元素时。您可以使用 ~ 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>

关注多个元素及其属性

Focus on multiple elements with their properties

html

css

focus

onfocus