在 Safari 中隐藏 textarea 调整大小句柄

safari webkit css

我在我的应用程序中使用 textarea 组件，并动态控制它们的高度。当用户键入时，只要有足够的文本，高度就会增加。这在 IE、Firefox 和 Safari 上运行良好。

但是，在 Safari 中，右下角有一个“手柄”工具，允许用户通过单击和拖动来调整文本区域的大小。我还注意到 stackoverflow Ask a Question 页面中 textarea 的这个问题。该工具令人困惑，基本上会妨碍您。

那么，有没有办法隐藏这个调整大小的句柄？

（我不确定“句柄”是否是正确的词，但我想不出更好的词。）

Tamas Czinege

您可以使用 CSS 覆盖调整大小行为：

textarea
{
   resize: none;
}

或者只是简单地

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

有效属性为：both、horizontal、vertical、none

此处不严格相关，但 Safari 也尊重 min-height、max-height、min-width 和 max-width CSS 属性以启用调整大小，但限制它可以调整的范围。

谢谢！正要问同样的问题:)

如果我想在设置 resize:none 后在悬停时显示它怎么办？

@Michael Forrest：你试过 textarea:hover { resize: inherit !important; } ?我没试过，只是猜测。

一个警告：根本不允许用户调整 <textarea> 的大小可能是一个可用性问题。设置 resize:vertical; 通常是更好的选择。它不应该弄乱你的布局，它会给用户更大的控制感。

GIPSSTAR

使用以下 CSS 规则为所有 TextArea 元素禁用此行为：

textarea {
    resize: none;
}

如果您想为某些（但不是全部）TextArea 元素禁用它，您有几个选项（感谢 this page）。

要禁用将 name 属性设置为 foo（即 <TextArea name="foo"></TextArea>）的特定 TextArea：

textarea[name=foo] {
    resize: none;
}

或者，使用 ID（即 <TextArea id="foo"></TextArea>）：

#foo {
    resize: none;
}

请注意，这仅与基于 WebKit 的浏览器（即 Safari 和 Chrome）相关，它们将调整大小句柄添加到 TextArea 控件。

Rahul Daksh

您可以简单地使用 CSS 覆盖调整大小行为：

textarea
{
   resize: none;
}

fortrabbit-frank

safari max-height max-width 机会也适用于 firefox 4.0 (b3pre)。顺便说一句，这里有很好的例子：http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/