如何防止textarea调整大小句柄显示更高的z-index div？

Question

我希望在我的页面上有一个隐藏的<textarea>元素来处理用户输入，同时以自定义方式显示它。我认为我能够通过给它一个比我隐藏它的元素更低的z-index来做到这一点（是的，元素定位也是如此）。实际上，textarea被恰当地隐藏了。但是......当输入足够的文本以使滚动条成为必需时，调整大小手柄（夹点）图标会显示在屏蔽<div>的顶部！ （至少在chrome上。）

Here's a jsfiddle来玩。

如何阻止这种情况发生？句柄实际上不允许调整大小，所以看起来很奇怪它会根据内容长度弹出到顶部。

此外，是否有一种隐藏文本输入字段的规范方法？

Answer 1

这应该完全禁用调整大小手柄 - 但是使用clip（）可以隐藏滚动条

<style>
 textarea{ 
   position: absolute;
   left:10px;
   top:10px;
   z-index:-1;
   resize:none;
   width:200px;
   height:50px;
   clip:rect(0,189px, 50px, 0);
 }
</style>

Answer 2

对于那些到达这里寻找隐藏调整大小图标的方法的人，请使用：

textarea {
    resize: none;
}