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
功能还是在的:
这就非常神奇了。
resize 按钮不会被伪元素遮盖的更多相关文章
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 伪元素 before 和 after 各种妙用
大家可能对伪类和伪元素有点迷糊,在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 这里整理总结下: 有时你会发现伪类元素使 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 理解伪元素 :Before 和 :After
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...
- css伪元素实现tootip提示框
先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...
- CSS的伪元素(二)
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
随机推荐
- Visual Code 调用Chrome 浏览HTML
Code 使用快捷键:Ctrl+Shit+B 然后再Task.json,替换以下: { "version": "0.1.0", "command&qu ...
- iOS: 解决某些第三方库因为ARC不能使用的问题
1.在target下面的build phases下有一个compile source,下面有很多待编译文件.可以看到一个compile flag,可以针对某些文件进行arc设置.这样,某些框架不能使用 ...
- android 不能在子线程中更新ui的讨论和分析
问题描写叙述 做过android开发基本都遇见过 ViewRootImpl$CalledFromWrongThreadException,上网一查,得到结果基本都是仅仅能在主线程中更改 ui.子线程要 ...
- VSCode------搭建.net core 2.0,并配置到IIS服务器
前奏 安装VSCode最新版: https://code.visualstudio.com/ 安装window server hosting,发布和部署到IIS使用: https://www.micr ...
- VMware Playerでの仮想マシン起動エラー
Windows Updateすると.翌日VMware Playerの仮想マシン起動時に 「この仮想マシンを構成済み設定でパワーオンするのに十分な物理メモリがありません.」 のエラーとなることが時々あり ...
- Docker应用之镜像
一.Docker包括三个基本概念 1.镜像(Image):Docker镜像是一个只读模板,例如一个镜像可以包含完整的Linux系统环境,里面仅仅安装了Apache或用户其他应用程序:镜像可以用来创建D ...
- 【GIS】Cesium GLTF
cd D:\GISSoft\3DsMax2017\COLLADA2GLTF-v2.1.4-windows-Release-x64 COLLADA2GLTF-bin.exe -f tree05.DAE ...
- System.exit(0)会跳过finally块的执行
public class test { public static void main(String[] args) { try { System.exit(0); System.out.printl ...
- php curl那点事儿
curl是最常用功能之一初始化句柄 $ch = curl_init(); post 传$data 1. 如果$data是字符串,则Content-Type是application/x-www-form ...
- Androd Toolbar 的简单使用(转)
14年Android开发者大会提出了Android5.0 系统以及 材料设置 Material Design.在 材料设计中推出了大量的UI效果,其中某些功能 已添加进 兼容包,所以可以在低版本中来实 ...