如何使用css更改表单标记焦点上的表单子元素的颜色

Question

尝试更改焦点上表单元素内的子元素的颜色。期望输入字段表单标记内的元素都没有用新颜色反映。当我手动将其更改为焦点在浏览器开发工具中时，它可以正常工作，但不能在键盘选项卡上按下。

这就是我的尝试：

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

Answer 2

即使您能够focus表单元素，当您focus输入时也会失去它，所以您可以尝试这样的事情：

input:focus {
  color: red;
}

input:focus ~ * {
  color: green;
}

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