Shulou(Shulou.com)06/01 Report--

This article mainly explains "CSS:focus-within pseudo-class selector how to use", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "CSS:focus-within pseudo-class selector how to use"!

CSS :focus-within pseudo-class selector

CSS :focus-within pseudo-class selector and IE8 began to support:focus can be said to be a close relative, the difference is that:focus indicates what to do when the current element is in focus state, and:focus-within indicates what to do when the current element or child elements of the current element are in focus state.

For example:

form:focus { outline: solid;}

Indicates that the outline element appears only when in focus.

form:focus-within { outline: solid;}

Indicates that the element outline appears when the element itself or its internal child elements are in focus state. In other words, the child element focus can change the style of any parent element.

Support for this new feature is bound to lead to richer forms of interaction in the future, as well as specific scenarios that simplify our implementation.

compatibility

Compatibility screenshots are as follows:

It was quite gratifying.

CSS :focus-within pseudo-class selector practical application example 1. Form Input Do Not Disturb Mode

When we form input, select, or interact, the form on the page assumes that nothing else is visible.

CSS code is as follows:

form { outline: 2000px solid hsla(0,0%,100%,0); transition: outline .2s; position: relative; z-index: 1;}form:focus-within { outline: 2000px solid hsla(0,0%,100%,1);}

The effect is as follows:

大屏浏览器体验更有感觉，您可以狠狠的点击这里：:focus-within伪类选择器与表单输入勿扰模式demo

本案例是真实的勿扰模式效果可以放心大胆在实际项目中使用，因为这是一个体验增强的交互，就算浏览器不支持，对原本功能也不会有任何影响。

2. 带计数文本域的focus高亮

对于带计数的组件化的多行文本域，计数的数值通常是设计在文本域的右下角，这样能够适应各种复杂的场景。如下截图：

然而这种设计对我们的布局实现带来的挑战。

我们通常想到的方法是，计数元素浮在下面的textarea元素上。然而这种时间存在有致命的不足，那就是输入框的内容有可能和我们的计数重叠，以及出现的滚动条和技术文本重叠，如下截图所示：

您可以狠狠地点击这里：带计数文本域自身:focus高亮重叠问题demo

因此，我们通常做法就是：边框使用父级元素模拟，文本域元素和技术元素上下依次排列（非重叠），文本域原本的边框去除。

假设HTML如下：

0/250

则核心CSS这样：

/* 父级div元素模拟边框 */.textarea-x { border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff;}/* 文本域原本的边框去除 */.textarea-x > textarea { border: 0; background: none;}

然而上面的实现有个非常严重的不足，那就是元素:focus时候，边框无法高亮，因为CSS中没有父选择器!

因此，实际开发的时候，我们会使用相邻兄弟选择器，以及新建一个兄弟元素来模拟边框。

HTML结构如下：

0/250

原理如下图示意：

对应的核心CSS代码如下：

.textarea-x { position: relative; z-index: 0;}.textarea-x > textarea { border: 0; background: none; outline: 0; resize: none; position: relative;}.textarea-x > .textarea { position: absolute; border: 1px solid #d0d0d5; border-radius: 4px; background-color: #fff; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;}.textarea-x > :focus + .textarea { border-color: #00a5e0; }

由于.textarea元素和原生的元素是相邻兄弟关系，因此我们可以借助相邻兄弟选择器，让元素focus时候后面用来模拟边框的.textarea元素高亮。也就是这么一段CSS代码：

.textarea-x > :focus + .textarea { border-color: #00a5e0; }

这种实现兼容IE7+浏览器。下图为实现后的效果截图：

当然涉及到具体代码，还是有很多细节需要注意的，您可以狠狠地点击这里：利用相邻兄弟选择器模拟带计数文本域:focus效果demo

但是，现在有了CSS :focus-within伪类选择器，我们的事情就简单多了。

还是开始提到的父级元素模拟的做法，然后，配合这么一句CSS就可以了：

.textarea-x:focus-within { border-color: #00a5e0; }

就是这么简单。

您可以狠狠地点击这里：:focus-within伪类与带计数文本域高亮demo

focus时候效果如下截图：

三、:focus-within更多思路、更棒案例和结束语

:focus-within伪类原本设计的作用是原生表单元素focus时候，祖先元素可以也有状态变化。

但是在我看来，:focus-within功能之强悍，远远不是仅仅和祖先元素玩过家家这么简单。

理论上，只要页面上任意一个元素focus，通过:focus-within就能对页面上任意的元素进行样式控制。

例如：

html:focus-within xxx { /*xxx跑得了吗？跑不了*/}

我想到的有：

相邻选择器，加号，或者弯弯都只能选择后面的元素，但是，有了:focus-within，我们就可以对前面元素进行控制，虽然只能在:focus行为场景下。例如请重复输入密码时候，让上面的输入密码框也高亮。

基于纯CSS和focus行为实现下拉列表的交互成为了可能。只要把按钮和下拉元素放在一个容器中，就可以了。

您可以狠狠地点击这里：:focus-within伪类与纯CSS下拉列表demo

点击"我的消息"，就会出现下拉列表;此时点击下拉列表里面的条目，下拉元素也一直显示（因为列表是可focus的元素）。只有点击页面空白元素或其他位置，下拉列表才会隐藏。完全符合实际项目开发的下拉列表交互需求。

交互效果如下GIF截屏所示：

核心代码如下：

我的消息 我的回答12 我的私信 未评价订单2 我的关注 .box { display: none;}.details:focus-within .summary { background-color: #fff;}.details:focus-within .box { display: block;}到此，相信大家对"CSS的:focus-within伪类选择器怎么用"有了更深的了解，不妨来实际操作一番吧!这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.