我目前正在使用伪选择器:但是根据caniuse.com它在Edge和IE中无法使用,我在codepen中找到了一个整齐的workaround:< / p>
.focus-within-class > input:focus
然而,它将它与焦点结合在一起,如:
.focus-within > input:focus,
.focus-within:focus-within > input
在Edge中不起作用,以下解决方案在chrome中不起作用:
.focus-within > input:focus
我如何制作:专注于跨浏览器?
答案 0 :(得分:9)
一些事情。首先,您引用的“变通方法”并不等同于:focus-within
,因为生成的规则适用于<input>
元素。你可以轻松地做到
input:focus {
/* rules here */
}
没有打扰特殊课程。真正的:focus-within
伪类允许您定义适用于包含元素的规则,不 <input>
但是如果特定的解决方法确实对您有用,那么您需要将规则分解为单独的块。那是因为浏览器默默地忽略了他们不理解的任何CSS。所以当Edge看到
时.focus-within > input:focus,
.focus-within:focus-within > input
它注意到有一个它不理解的伪类(:focus-within
),所以它忽略了整个规则块,正如你所注意到的那样。如果将规则拆分为两个块,Edge将只忽略它不理解的块。
.focus-within > input:focus {
/* rules here, which Edge will apply */
}
.focus-within:focus-within > input
/* same rules here, which Edge will ignore */
}