真正从 <textarea> 中删除调整大小句柄

Posted 2023-05-07

【中文标题】真正从 <textarea> 中删除调整大小句柄

【英文标题】：Truly removing the resize handle from a <textarea>

【发布时间】：2022-01-11 07:03:33

【问题描述】：

如何真正从<textarea> 元素中完全删除调整大小句柄？设置resize:none; 似乎只隐藏了调整大小，但不允许将高度减小到超过调整大小句柄的位置，如下图所示。这可以很容易地通过创建一个没有设置高度属性的<textarea> 来重现，并观察到当调整大小句柄隐藏时 textarea 的高度不会改变。我正在寻找一种方法来确保只有一行文本时 textarea 的高度为 1em。

【参考方案1】：

您可以将其作为内联样式属性应用，如下所示：

<textarea style="resize: none;"></textarea>

具体更改：

全部禁用：

textarea  resize: none; 

仅垂直调整大小：

textarea  resize: vertical; 

仅水平调整大小：

textarea  resize: horizontal;  

使用限制禁用垂直和水平：

textarea  resize: horizontal; max-width: 400px; min-width: 200px; 

使用限制禁用水平和垂直：

textarea  resize: vertical; max-height: 300px; min-height: 200px; 

【讨论】：

嘿，这不是我要问的。我知道您可以使用 resize:none; 隐藏调整器，但我想知道是否有办法删除调整器附带的额外高度，即使它是隐藏的，根据 OP 中的图像。