css - 如何使用CSS更改表单标签焦点上表单子(monad)元素的颜色

Question

我正在尝试更改焦点表单元素内的子元素的颜色。期待输入字段，表单标签内的所有元素都没有用新颜色反射(reflect)。当我手动将其更改为专注于浏览器开发工具时，它可以工作，但不能在键盘上按 Tab 键。

这是我尝试过的:

HTML:

<form>
  <input type="text" />
  <span>icon</span>
</form>

SCSS:

    form:focus{
     input {
      color: red;
     }
     span{
      color: green;
     }
   }

Answer 1

你可以使用伪选择器:focus-within

form:focus-within input {
  color: red;
}
form:focus-within span {
  color: green;
}

<form>
  <input type="text" />
  <span>icon</span>
</form>

2018 年 6 月，对于 IE 11、Edge 和一些旧版浏览器，您将需要一个 polyfill。有 PostCSS focus-within https://jonathantneal.github.io/focus-within/

https://caniuse.com/#feat=css-focus-within