一、众所周知的
众所周知，文本域(
textarea
)在FireFox或Chrome浏览器下，右下角有个可以拖拽的标志。
有人保留，有人嫌碍事，直接
resize:none;
掉，但是，估计没人利用整个儿做交互效果。
二、纯CSS的交互展示
您可以狠狠地点击这里： textarea resize下的纯CSS交互demo
例如，在FireFox浏览器下，拖动（往右→）下图圈中的图标：
一个半透明遮罩层随着拖动把张含韵给覆盖了，达到了半遮面的交互效果。
效果没什么，但是却完全CSS实现的，就有意思了。
三、实现原理
我们平时拖动文本域的时候，往右拖则文本域宽度往右侧扩展。但是，如果文本域右侧定位（浮动或绝对定位），则右侧不动，宽度往左侧扩展。下图演示为右100像素绝对定位：
我们还知道，
textarea
resize
的时候宽度变化会让具有“包裹性”的父元素宽度跟着一起变化，所以，如果我们把
textarea
放在具有半透明背景色的层中，那拉伸的时候，这个半透明层不就可以拉拉伸伸，有了交互效果啦！这就是demo中半透明层覆盖来覆盖去的原理。
说得再多也不容易明白，demo中一些障眼的属性（
overflow:hidden;
、
opacity:0;
）去掉，你就知道大概了。下图为去掉
overflow:hidden;
以及文本域
opacity
设为
0.6
后的效果：
四、结束语
经测试，Opera/FireFox/Chrome浏览器支持，IE10以及下面的喽喽们都不支持。显然，兼容性是硬伤。因此，除了一些特殊情况，此实现没有多少实用价值。仅供大家娱乐，仅供大家参考。当然，您可以发挥你智慧实现其他一些交互。
唉，忧伤的三月，就这些，感谢阅读！
参考文章： Tricky Textarea Pulltab
原创文章，转载请注明来自
张鑫旭-鑫空间-鑫生活
[
http://www.zhangxinxu.com
]
本文地址：
http://www.zhangxinxu.com/wordpress/?p=3132
