我正在尝试更改子元素的颜色,这些子元素位于焦点上的表单元素内。Expect input字段form标记内的元素均未使用新颜色反映。当我手动转到并在浏览器开发工具中将其更改为焦点时,它可以工作,但在键盘上按tab键时不起作用。
这是我尝试过的:
HTML:
<form>
<input type="text" />
<span>icon</span>
</form>
SCSS:
form:focus{
input {
color: red;
}
span{
color: green;
}
}
发布于 2018-06-06 07:50:34
即使您能够对表单元素执行focus
操作,当您对输入执行focus
操作时,也会丢失它,因此您可以尝试执行以下操作:
input:focus {
color: red;
}
input:focus ~ * {
color: green;
}
<form>
<input type="text">
<span>icon</span>
</form>
发布于 2018-06-06 07:56:29
您可以使用伪选择器: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://stackoverflow.com/questions/50710409
复制相似问题