专栏名称: AleCC

善良的小美工

CSS :focus-within伪类选择器及纯CSS下拉等应用举例 « 张鑫旭-鑫空间-鑫生活

AleCC · 掘金 · · 2018-01-22 02:45

正文

CSS :focus-within伪类选择器及纯CSS下拉等应用举例

这篇文章发布于 2018年01月21日，星期日，23:56，归类于 css相关。阅读 424 次, 今日 209 次

by zhangxinxu from www.zhangxinxu.com/wordpress/?…
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、了解CSS :focus-within伪类选择器

CSS :focus-within 伪类选择器和IE8就开始支持的 :focus 可以说是近亲，区别在于 :focus 表示当前元素处于focus状态时候干嘛干嘛，而 :focus-within 表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。

举个例子：

form:focus {
  outline: solid;
}

表示仅仅当 <form> 处于focus状态时候， <form> 元素 outline 出现。

form:focus-within {
  outline: solid;
}

表示 <form> 元素自身，或者 <form> 内部的子元素处于focus状态时候， <form> 元素 outline 出现。换句话说，子元素 focus ，可以让任意父级元素样式发生变化。

这个新特性的支持，未来势必会带来更加丰富的交互形式，以及特定场景简化我们实现。

兼容性

兼容性如下截图：

还是挺喜人的。

二、CSS :focus-within伪类选择器实际应用举例

1. 表单输入勿扰模式

当我们表单输入，选择或者进行交互时候，页面上表单以为其他内容全部都不可见。

CSS代码如下：

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);
}

效果如下截屏gif：

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

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

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

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

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

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

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

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

假设HTML如下：

<div class="textarea-x">
    <textarea></textarea>
    <label class="textarea-count">0/250</label>
</div>

则核心CSS这样：

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

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

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

HTML结构如下：

<div class="textarea-x">
    <textarea></textarea>
    <div class="textarea"></div>
    <label class="textarea-count">0/250</label>
</div>

原理如下图示意：

对应的核心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 元素和原生的 <textarea> 元素是相邻兄弟关系，因此我们可以借助相邻兄弟选择器，让 <textarea> 元素focus时候后面用来模拟边框的 .textarea 元素高亮。也就是这么一段CSS代码：

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

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

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

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

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

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

就是这么简单。

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

focus时候效果如下截图：

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

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

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

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

例如：

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

我想到的有：