码迷,mamicode.com
首页 > 其他好文 > 详细

resize 按钮不会被伪元素遮盖

时间:2018-05-06 17:02:47      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:and   一个   分享图片   ott   present   aced   span   bottom   元素   

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

标签:and   一个   分享图片   ott   present   aced   span   bottom   元素   

原文地址:https://www.cnblogs.com/xianshenglu/p/8998662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!