分享更有价值
被信任是一种快乐

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

文章页正文上

本篇内容主要讲解“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伪类选择器,我们的事情就简单多了。

还是开始提到的父级

元素模拟的做法,然后,配合这么一句CSS就可以了:

.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跑得了吗?跑不了*/}

我想到的有:

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

  2. 基于纯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伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. css 多种背景的使用场景和技巧、优点介绍
  2. 有趣的JavaScript与CSS库有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

  • 上一篇新闻:

    CSS怎么实现背景渐变图片过渡效果
  • 下一篇新闻:

    css使用技巧实例分析

猜你喜欢

  • 前端知识总结
  • 浮动后父组件高度为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通配符选择器怎么用

相关标签

css-t
css3
css modules
scss
postcss
css类
css flex
csss3
css的使用
css sprite
html5 css3
css颜色
animate.css
css文件
css布局
css2
css预处理器
css样式表
CSS盒模型
oocss

假设HTML如下:则核心CSS这样:然而上面的实现有个非常严重的不足,那就是元素:focus时候,边框无法高亮,因为CSS中没有父选择器!因此,实际开发的时候,我们会使用相邻兄弟选择器,以及新建一个兄弟元素来模拟边框。HTML结构如下:原理如下图示意:对应的核心CSS代码如下:由于.textarea元素和原生的元素是相邻兄弟关系,因此我们可以借助相邻兄弟选择器,让元素focus时候后面用来模拟边框的.textarea元素高亮。也就是这么一段CSS代码:这种实现兼容IE7+浏览器。下图为实现后的效果截图:当然涉及到具体代码,还是有很多细节需要注意的,您可以狠狠地点击这里:利用相邻兄弟选择器模拟带计数文本域:focus效果demo但是,现在有了CSS:focus-within伪类选择器,我们的事情就简单多了。还是开始提到的父级

元素模拟的做法,然后,配合这么一句CSS就可以了:

.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跑得了吗?跑不了*/}

我想到的有:

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

  2. 基于纯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伪类选择器怎么用”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. css 多种背景的使用场景和技巧、优点介绍
  2. 有趣的JavaScript与CSS库有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

  • 上一篇新闻:

    CSS怎么实现背景渐变图片过渡效果
  • 下一篇新闻:

    css使用技巧实例分析

猜你喜欢

  • 前端知识总结
  • 浮动后父组件高度为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 离线功能介绍 HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向。在 HT…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册