资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS的:focus-within伪类选择器怎么用

本篇内容主要讲解“CSS的:focus-within伪类选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的:focus-within伪类选择器怎么用”吧!

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业潢川免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

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

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

举个例子:

form:focus {
  outline: solid;
}

表示仅仅当

处于focus状态时候,元素outline出现。

form:focus-within {
  outline: solid;
}

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

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

兼容性

兼容性如下截图:

CSS的:focus-within伪类选择器怎么用

还是挺喜人的。

二、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:

CSS的:focus-within伪类选择器怎么用

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

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

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

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

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

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

CSS的:focus-within伪类选择器怎么用

您可以狠狠地点击这里:带计数文本域自身: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;
}

然而上面的实现有个非常严重的不足,那就是     

    0/250

原理如下图示意:

CSS的:focus-within伪类选择器怎么用

对应的核心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元素和原生的