阅读 2352

新CSS伪类:focus-within

原文链接:点击这里 ,本文根据此文总结而来。

偶然间发现新的CSS伪类:focus-within,能非常方便处理获取焦点状态。

当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

没看懂,可以看下面的例子:

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>复制代码
.container:focus-within { 
  background-color: #aaa; 
}复制代码

如果div.container获取到焦点时,就会有一个#aaa背景色。而且如果其后代元素获得焦点时,其背景色也会更改,所以<input>收到焦点时,div的背景色仍是#aaa

这样,我们就不需要实现这样功能时,总是使用JavaScript,极大方便开发者。

但是,浏览器支持:focus-within还是很少,不过相信很快,就会全面支持。

大家可以看下面的gif动画(在Firefox浏览器下实现)

可以在支持的浏览器下,打开此codepen看看效果。


喜欢此文的同学,可以关注我的知乎专栏前端乱炖大杂烩

关注下面的标签,发现更多相似文章
评论