本篇内容主要讲解“CSS的:focus-within伪类选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的:focus-within伪类选择器怎么用”吧!CSS:focus-within
伪类选择器和IE8就开始支持的:focus
可以说是近亲,区别在于:focus
表示当前元素处于focus状态时候干嘛干嘛,而:focus-within
表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。举个例子:表示仅仅当
处于focus状态时候,
元素outline
出现。表示
元素自身,或者
内部的子元素处于focus状态时候,
元素outline
出现。换句话说,子元素focus
,可以让任意父级元素样式发生变化。这个新特性的支持,未来势必会带来更加丰富的交互形式,以及特定场景简化我们实现。兼容性如下截图:还是挺喜人的。当我们表单输入,选择或者进行交互时候,页面上表单以为其他内容全部都不可见。CSS代码如下:效果如下截屏gif:大屏浏览器体验更有感觉,您可以狠狠的点击这里::focus-within伪类选择器与表单输入勿扰模式demo本案例是真实的勿扰模式效果可以放心大胆在实际项目中使用,因为这是一个体验增强的交互,就算浏览器不支持,对原本功能也不会有任何影响。对于带计数的组件化的多行文本域,计数的数值通常是设计在文本域的右下角,这样能够适应各种复杂的场景。如下截图:然而这种设计对我们的布局实现带来的挑战。我们通常想到的方法是,计数元素浮在下面的textarea
元素上。然而这种时间存在有致命的不足,那就是输入框的内容有可能和我们的计数重叠,以及出现的滚动条和技术文本重叠,如下截图所示:您可以狠狠地点击这里:带计数文本域自身:focus高亮重叠问题demo因此,我们通常做法就是:边框使用父级
假设HTML如下:
则核心CSS这样:
/*父级div元素模拟边框*/.textarea-x{ border:1pxsolid#d0d0d5; border-radius:4px; background-color:#fff; }/*文本域原本的边框去除*/.textarea-x>textarea{ border:0; background:none; }
然而上面的实现有个非常严重的不足,那就是元素
:focus
时候,边框无法高亮,因为CSS中没有父选择器!
因此,实际开发的时候,我们会使用相邻兄弟选择器,以及新建一个兄弟元素来模拟边框。
HTML结构如下:
原理如下图示意:
对应的核心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:1pxsolid#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
伪类选择器,我们的事情就简单多了。
还是开始提到的父级
.textarea-x:focus-within{ border-color:#00a5e0; }
就是这么简单。
您可以狠狠地点击这里::focus-within伪类与带计数文本域高亮demo
focus时候效果如下截图:
三、:focus-within更多思路、更棒案例和结束语
:focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先
元素可以也有状态变化。
但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先
元素玩过家家这么简单。
理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制。
例如:
html:focus-withinxxx{/*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伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
- css 多种背景的使用场景和技巧、优点介绍
- 有趣的JavaScript与CSS库有哪些
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
猜你喜欢
- 前端知识总结
- 浮动后父组件高度为0的问题
- jsp页面zTree的简单应用
- 鼠标滚轮调整图片大小
- android内嵌html5页面不能播放视频
- 图片在手机上无法自适应显示该怎么办【解决方案】
- 如何在jsp页面里使用vue
- 如何在网页中插入自动播放的音乐?使用于任何网页
- flex布局下的flex-grow、flex-shrink、flex-basis属性详解
- flexbox布局的兼容性怎么样
最新资讯
- Java中局部变量和成员变量有什么区别
- 如何通过Javascript脚本获取form和input内容
- String和List
间的相互转换 - 解决UnsupportedOperationException异常问题的方法
- springboot获取项目目录路径的方法
- C语言如何解决QString与QByteArray互相转换的问题
- TypeScript接口和类型有哪些区别
- JavaScript怎么快速关闭
- 怎么使用JAVAscript实现Excel
- java后台调用接口及处理跨域问题的方法是什么
相关推荐
- CSS行内元素有哪些
- 如何使用jQuery样式操作css
- css块级元素有哪些
- css链接伪类选择器怎么用
- css并集选择器怎么用
- css交集选择器怎么用
- css子元素选择器怎么用
- css后代选择器怎么用
- css中font如何综合设置字体样式
- css通配符选择器怎么用
相关标签
假设HTML如下:则核心CSS这样:然而上面的实现有个非常严重的不足,那就是元素
:focus
时候,边框无法高亮,因为CSS中没有父选择器!因此,实际开发的时候,我们会使用相邻兄弟选择器,以及新建一个兄弟元素来模拟边框。HTML结构如下:原理如下图示意:对应的核心CSS代码如下:由于.textarea
元素和原生的元素是相邻兄弟关系,因此我们可以借助相邻兄弟选择器,让
元素focus时候后面用来模拟边框的
.textarea
元素高亮。也就是这么一段CSS代码:这种实现兼容IE7+浏览器。下图为实现后的效果截图:当然涉及到具体代码,还是有很多细节需要注意的,您可以狠狠地点击这里:利用相邻兄弟选择器模拟带计数文本域:focus效果demo但是,现在有了CSS:focus-within
伪类选择器,我们的事情就简单多了。还是开始提到的父级
.textarea-x:focus-within{ border-color:#00a5e0; }
就是这么简单。
您可以狠狠地点击这里::focus-within伪类与带计数文本域高亮demo
focus时候效果如下截图:
三、:focus-within更多思路、更棒案例和结束语
:fo免费云主机、域名cus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先
元素可以也有状态变化。
但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先
元素玩过家家这么简单。
理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制。
例如:
html:focus-withinxxx{/*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伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
- css 多种背景的使用场景和技巧、优点介绍
- 有趣的JavaScript与CSS库有哪些
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
猜你喜欢
- 前端知识总结
- 浮动后父组件高度为0的问题
- jsp页面zTree的简单应用
- 鼠标滚轮调整图片大小
- android内嵌html5页面不能播放视频
- 图片在手机上无法自适应显示该怎么办【解决方案】
- 如何在jsp页面里使用vue
- 如何在网页中插入自动播放的音乐?使用于任何网页
- flex布局下的flex-grow、flex-shrink、flex-basis属性详解
- flexbox布局的兼容性怎么样
就是这么简单。您可以狠狠地点击这里::focus-within伪类与带计数文本域高亮demofocus时候效果如下截图::focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先
元素可以也有状态变化。但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先
元素玩过家家这么简单。理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制。例如:我想到的有:相邻选择器,加号,或者弯弯都只能选择后面的元素,但是,有了:focus-within
,我们就可以对前面元素进行控制,虽然只能在:focus
行为场景下。例如请重复输入密码时候,让上面的输入密码框也高亮。基于纯CSS和focus行为实现下拉列表的交互成为了可能。只要把按钮和下拉元素放在一个容器中,就可以了。您可以狠狠地点击这里::focus-within伪类与纯CSS下拉列表demo点击“我的消息”,就会出现下拉列表;此时点击下拉列表里面的条目,下拉元素也一直显示(因为列表是可focus的元素)。只有点击页面空白元素或其他位置,下拉列表才会隐藏。完全符合实际项目开发的下拉列表交互需求。交互效果如下GIF截屏所示:核心代码如下:到此,相信大家对“CSS的:focus-within伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
这篇文章给大家分享的是有关HTML5如何实现离线存储功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 HTML5 离线功能介绍 HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向。在 HT…