resize 按钮不会被伪元素遮盖
textarea
默认有个resize
样式,效果就是下面这样
读 《css 揭秘》时发现两个亮点:
- 其实这个属性不仅适用于
textarea
元素,适用于下面所有元素:
elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
- 你可以通过伪元素来覆盖原有的样式,而且不会影响原有的
resize
功能,但是其他元素不行。
这一点,可能不太好理解,举个例子,我们用一个span
来覆盖右下角的按钮
<div>div<span>span</span>
</div>
div {width:100px;height:100px;background-color:pink;resize:horizontal;overflow:hidden;position:relative;
}
span {content:'';display:block;width:20px;height:20px;background-color:yellowgreen;position:absolute;right:0;bottom:0;
}
效果是这样,resize
功能失效了:
但是,如果把 span
换成伪元素,就是可以的:
<div>div<span>span</span>
</div>
div {width:100px;height:100px;background-color:pink;resize:horizontal;overflow:hidden;position:relative;
}
div::after {content:'';display:block;width:20px;height:20px;background-color:yellowgreen;position:absolute;right:0;bottom:0;
}
resize
功能还是在的:
这就非常神奇了。
转载于:https://www.cnblogs.com/xianshenglu/p/8998662.html
resize 按钮不会被伪元素遮盖相关推荐
- 【CSS进阶】伪元素的妙用--单标签之美
正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用. :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可 ...
- css设置按钮竖直方向居中_如何借助伪元素实现垂直居中?
点击右上方红色按钮关注"小郑搞码事",每天都能学到知识,搞懂一个问题! 今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after) 一.vertical-al ...
- 伪元素控制网页表单样式
当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有 ...
- 巧用伪元素和伪类让我们的html结构更清晰合理
css3为了区分伪类和伪元素,伪元素采用双冒号写法. 伪类 -- :hover, :link, :active, :visited, :first-child, :last-child, nth-ch ...
- css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
- CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
- 理解伪元素 :before 和 :after
为什么80%的码农都做不了架构师?>>> 层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一 ...
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS一个冒号是伪类:用于监控动作、两个冒号是伪元素::用于定位元素
一个冒号两个冒号::: 一个冒号是伪类,两个冒号是伪元素 伪类有----:first-child ,:link , :vistited,:hover:,active:focus,:lang用于监控 ...
最新文章
- 实体类,bean文件,pojo文件夹,model文件夹都一样
- boost::gil::promote_integral用法的测试程序
- 使用XMANAGER 联接LINUX 后使用SQLPLUS 不能使用BACKSPACE 回格键.
- 准备树莓派下的模块开发环境
- 通过Microsoft Learn进行学习以提升技能
- Qt图形界面编程入门(5)
- java编写一个彩票开奖的模拟程序.游戏共有两种玩法,一种是21选5,即玩家输入5个1到21内的不重复的数。另外一种玩法是6+1玩法,即要求玩家输入7个整数,代表所购买的彩票号码,最后一个是特码。
- leetcode 9. 回文数(python)
- 日均千万级消息规模,深捷旅使用函数计算释放运维压力
- 如何用计算机声卡录声音,教你Win10怎么录制电脑内部声卡播放的声音-电脑怎么录音...
- 2020软考系统架构设计师总结
- 史上最全的Unreal Engine 4学习资料整理
- 如何安装TFP(tensorflow概率编程)
- mysql导vertica_vertica从其他表迁移数据到新表(insertinto语句用法实例)
- 最速降线问题-泛函极值
- 怎样把d盘改成c盘!如何把收藏夹和桌面的路径设成D盘
- C#-调用OCR组件识别图片文字
- 用Pytest+Allure生成漂亮的HTML图形化测试报告(废弃)
- 当米友遇到终端(三)
- 轻松实现word文档在线编辑
热门文章
- androidstudio带pom的上传到jcenter_输送机@网带输送机@304网带输送机@304不锈钢网带输送机@输送机网带厂家定制...
- c语言中的两个百分号什么意思,百分号的用法,特别是在两个量词之间的用法,例如50%—70%和50—70%...-百分号-语文-彭都宰同学...
- mysql教程目录_MySql目录(二)
- 已阻止应用程序访问图形硬件_玩转智能硬件之Jetson Nano(三)深度学习环境搭建...
- eclipse java工程目录_转载:Eclipse下的java工程目录
- mysql启动时执行sql server_常见 mysql 启动、运行.sql 文件错误处理
- php获取src,PHP读取文件
- git 忽略 部分文件夹_git设置忽略文件和目录
- Linux入门笔记——echo
- C学习杂记(四)sizeof计算联合体大小