如何使用css更改表单标记焦点上的表单子元素的颜色
如何使用css更改表单标记焦点上的表单子元素的颜色
提问于 2018-06-06 07:46:08
我正在尝试更改子元素的颜色，这些子元素位于焦点上的表单元素内。Expect input字段form标记内的元素均未使用新颜色反映。当我手动转到并在浏览器开发工具中将其更改为焦点时，它可以工作，但在键盘上按tab键时不起作用。
这是我尝试过的：
HTML：
<form>
<input type="text" />
<span>icon</span>
</form>SCSS：
form:focus{
input {
color: red;
}
span{
color: green;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 07:50:34
即使您能够对表单元素执行focus操作，当您对输入执行focus操作时，也会丢失它，因此您可以尝试执行以下操作：
input:focus {
color: red;
}
input:focus ~ * {
color: green;
}<form>
<input type="text">
<span>icon</span>
</form>
Stack Overflow用户
发布于 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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50710409
复制相关文章
相似问题