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 按钮不会被伪元素遮盖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。