在桌面版 Safari、Chrome、Firefox 和 Opera-under-Presto 中（IE 不适用，移动设备也不适用），<textarea> 在右下角有一个小的调整大小的部件。Textarea 用于书写，因此如果用户需要更多空间来更舒适地书写，他们可以拥有它。单击并拖动该调整大小部件实际上会更改该 textarea 的盒模型，根据需要将其他内容推开。我们可以利用这个小功能来实现一个技巧！
公平地说，这不是我发明的。大约一年前我见过它，但我无论如何也想不起来在哪里看到的。当我看到 David Walsh 关于 如何对其进行样式设置 的快速帖子时，它让我想起了这个，所以我开始重新创建这个想法。
假设您将该 <textarea> 放入一个绿色的 <div> 中。
然后您将该 <textarea> 拖动得更高。<div> 会变得更大。
现在假设我们绝对定位该
现在，当您拖动 textarea 的调整大小部件 **向下** 以使其更大时，div 实际上会 **向上** 增长。
然后，如果我们将 textarea 变小并设置调整大小句柄的样式，它看起来就不像 textarea 了（仅限 WebKit）。
textarea {
width: 12px;
height: 12px;
}
textarea::-webkit-resizer {
background: yellow;
}
那里有一些小块悬挂在底部。我不确定这是怎么回事，但您可以使用任一包装器上的 overflow: hidden; 来隐藏它。
我们将进一步设置调整大小部件（我想我们现在可以称之为“选项卡”）的样式，方法是
- 将其居中 –
.tab { text-align: center; } - 隐藏 textarea 的内部内容 –
textarea { background: none; border: 0; } - 确保选项卡只能向下拉 –
textarea { resize: vertical; } - 限制新显示区域的高度 –
.tab, textarea { max-height: 100px; }</li>
现在，当您向下拉动“选项卡”时，它只会显示更多绿色
因此，现在，如果我们要在该绿色区域中放入一些实际内容，并将其定位到足够低的位置以默认隐藏，我们就可以拉动那个小选项卡并显示内容。非常巧妙。
演示
颜色等已更改，使其更易于查看。
我不知道这是否特别有用。我知道它不太适合移动设备。我知道它在跨浏览器方面并不酷。它是一个货真价实的 CSS 小技巧。
它确实让你讨厌 IE，不是吗？
这是一个很巧妙的技巧，我真的很喜欢你的作品 Chris，继续努力！
公平地说，你并不是你在这里发布的大多数东西的发明者。你只是重复了其他人的发现。例如，你最近的 SVG 文章。
我很高兴这次你有勇气感谢其他人，即使那个人是匿名的。
讨厌的人总会讨厌。
谢谢？
我想通常我是一个文章窃取者？如果此网站上的任何地方有任何未经署名的作品，请告诉我。
Chris 是一位优秀的沟通者，并且运营着一个很棒的网站。你真的把他看成某种网络罪犯吗？
他的名字是 Ron Weasly。一个哈利波特虚构人物，除非那真的是你的名字，否则我有点同情你，伙计。我猜他的魔法技能在这里真的让他失望了。听起来像个喷子，Chris。即使他代表其他文章写作，你真的认为他会直接复制它们吗？有一个叫做释义的术语……
与许多博客纳粹可能说的相反，重复并不是坏事。事实上，它 *经常* 非常有帮助。
当需要学习一项新的技能或技巧时，您多久会“谷歌一下”，然后开始阅读关于该主题的博客文章？如果您像我一样，那就是每次。然后，您多久会读几篇然后却步，因为教程要么
1) 写得不好
2) 作者没有完全理解
3) 或者文章的呈现方式与您不符。
在我的情况下，这种情况经常发生。这里的文章几乎总是简单明了。它们可能并不总是完美或始终“正确”，但没有人是完美的。这就是我们学习的方式。
鲁珀特·格林特不会对你不高兴，罗恩·韦斯莱。
我相信这可能是哈利波特与魔法石中的喷子。:P
看起来，如果您中途停止拖动，您会陷入奇怪的僵局，不过这确实是一个很巧妙的技巧！
嘿，Chris，
很棒的技巧！
只是一点建议，您可能需要在该示例中设置滚动条的样式。
如果您缓慢地向下拉动红色选项卡，它会在 Chrome 中显示一个位于其上方的滚动条。
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb
{
opacity:0;
}
只是一个小提示，最新版本的 Firefox 中没有文本调整大小功能。
resize: both;
width: 200px;
overflow: auto;
有趣的发现。关于调整大小：对于 Safari、Chrome 和 FF，具有固定宽度的 textarea 会很棒，这样调整大小只会更改高度。
你是问你是否能够做到吗？Chris 在他的演示中做到了，所以也许我只是误读了你的陈述，把它当成了一个问题。
以防万一您想知道 - 您可以通过两种方式阻止调整宽度 - 您可以像 Chris 在他的演示中那样使用“resize:vertical;”（这是正确的方法），或者您可以为 textarea 指定最大宽度。
Chris！这真是一个很棒的教程。谢谢！
又一篇很棒的文章，一如既往……我喜欢这里有多少随机技巧可以用于很棒的小视觉效果……我希望能看到它们组合成最终的 css 技巧网站！（有点像对最佳 css 技巧的巨大融合……尽管也许这个网站本身就是这样，但我们没有注意到所有的技巧！无论如何）
不是要老调重弹，但 Chris，你太好了……任何来到这里或任何其他类似网站的人，如果对文章的原创性感到不安，而网站本质上是在提供很棒的免费帮助和建议 - 我建议两件事：1. 以没有想法是原创的想法来思考你对原创性的看法，我们都在重复别人已经做过的事情（- 这不是开发的 75% 吗？）……以及 2. 环顾你生活的这个世界，然后闭嘴。
:)
我们不能去掉那个小调整大小的部件吗？
喜欢它！
您现在可以删除页脚中的免责声明！
**可能包含或可能不包含任何“CSS”或“技巧”**
:-)
您实际上不需要为此使用文本区域。'resize' 属性适用于任何块（例如 div）或内联块。不确定（尚未检查），但它甚至可能在表格和表格单元格上也能起到一定作用（因为它们可以具有高度和宽度，但没有溢出）。
可爱，谢谢。
您是在这里看到的 http://codepen.io/mmoustafa
它是特色笔。
是的！谢谢 Mohamed。巧妙的作品。