本篇内容主要讲解“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代码如下:
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
本案例是真实的勿扰模式效果可以放心大胆在实际项目中使用,因为这是一个体验增强的交互,就算浏览器不支持,对原本功能也不会有任何影响。
对于带计数的组件化的多行文本域,计数的数值通常是设计在文本域的右下角,这样能够适应各种复杂的场景。如下截图:
然而这种设计对我们的布局实现带来的挑战。
我们通常想到的方法是,计数元素浮在下面的textarea
元素上。然而这种时间存在有致命的不足,那就是输入框的内容有可能和我们的计数重叠,以及出现的滚动条和技术文本重叠,如下截图所示:
您可以狠狠地点击这里:带计数文本域自身:focus高亮重叠问题demo
因此,我们通常做法就是:边框使用父级 假设HTML如下: 则核心CSS这样: 然而上面的实现有个非常严重的不足,那就是 因此,实际开发的时候,我们会使用相邻兄弟选择器,以及新建一个兄弟元素来模拟边框。 HTML结构如下: 原理如下图示意: 对应的核心CSS代码如下: 由于 这种实现兼容IE7+浏览器。下图为实现后的效果截图: 当然涉及到具体代码,还是有很多细节需要注意的,您可以狠狠地点击这里:利用相邻兄弟选择器模拟带计数文本域:focus效果demo 但是,现在有了CSS 还是开始提到的父级 就是这么简单。 您可以狠狠地点击这里::focus-within伪类与带计数文本域高亮demo focus时候效果如下截图: 但是在我看来, 理论上,只要页面上任意一个元素 例如: 我想到的有: 相邻选择器,加号,或者弯弯都只能选择后面的元素,但是,有了 基于纯CSS和focus行为实现下拉列表的交互成为了可能。只要把按钮和下拉元素放在一个容器中,就可以了。 您可以狠狠地点击这里::focus-within伪类与纯CSS下拉列表demo 点击“我的消息”,就会出现下拉列表;此时点击下拉列表里面的条目,下拉元素也一直显示(因为列表是可focus的 交互效果如下GIF截屏所示: 核心代码如下: 到此,相信大家对“CSS的:focus-within伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!/* 父级div元素模拟边框 */.textarea-x {
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
}/* 文本域原本的边框去除 */.textarea-x > textarea {
border: 0;
background: none;
}
元素
:focus
时候,边框无法高亮,因为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;
}
:focus-within
伪类选择器,我们的事情就简单多了。.textarea-x:focus-within {
border-color: #00a5e0;
}
三、:focus-within更多思路、更棒案例和结束语
:focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先元素可以也有状态变化。
:focus-within
功能之强悍,远远不是仅仅和祖先元素玩过家家这么简单。
focus
,通过:focus-within
就能对页面上任意的元素进行样式控制。html:focus-within xxx { /*xxx跑得了吗?跑不了*/}
:focus-within
,我们就可以对前面元素进行控制,虽然只能在:focus
行为场景下。例如请重复输入密码时候,让上面的输入密码框也高亮。元素)。只有点击页面空白元素或其他位置,下拉列表才会隐藏。完全符合实际项目开发的下拉列表交互需求。
.box {
display: none;
}
.details:focus-within .summary {
background-color: #fff;
}
.details:focus-within .box {
display: block;
}
文章标题:CSS的:focus-within伪类选择器怎么用
网页地址:http://cdkjz.cn/article/ihhdod.html