首页
登录 | 注册

resize 按钮不会被伪元素遮盖

textarea默认有个resize样式,效果就是下面这样

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功能失效了:

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 按钮不会被伪元素遮盖

这就非常神奇了。


相关文章

  • 每日分享!~ 使用js原生方式对拖拉元素(鼠标的事件)
    一个元素放置页面上.如何进行拖拉,实现想放哪里就放哪里的效果呢? 效果如下:   如果让你写这个效果,你会如何写呢?  --- 思路分析:我首先想到的是,对这个元素先绑定一个事件.(什么事件? 那当然是鼠标按下时的事件啦? )   那么绑定 ...
  • 页面性能优化-原生JS实现图片懒加载
         在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的 ...
  • 一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具类,不仅可以存储数量不等的对象,还可以实 ...
  • Android6.0 源码修改之 Contacts应用
    一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 QuickContactActivity 左 ...
  • 机器学习web服务化实战:一次吐血的服务化之路
    背景 在公司内部,我负责帮助研究院的小伙伴搭建机器学习web服务,研究院的小伙伴提供一个机器学习本地接口,我负责提供一个对外服务的HTTP接口. 说起人工智能和机器学习,python是最擅长的,其以开发速度快,第三方库多而广受欢迎,以至于现 ...
  • 你所不知道的日志异步落库
    在互联网设计架构过程中,日志异步落库,俨然已经是高并发环节中不可缺少的一环.为什么说是高并发环节中不可缺少的呢? 原因在于,如果直接用mq进行日志落库的时候,低并发下,生产端生产数据,然后由消费端异步落库,是没有什么问题的,而且性能也都是异 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.064 s.
京ICP备10005923号