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

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

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

因此，是否有隐藏此调整大小手柄的方法？

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

safari webkit css

— 大卫·马奇
source

Answers:

177

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

textarea
{
   resize: none;
}

或者只是

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

有效属性是：水平，垂直，无

— 塔玛斯·辛格（Tamas Czinege）
source

此处不严格相关，但Safari也会尊重min-height，max-height，min-width和max-width CSS属性，以启用调整大小功能，但限制了其可调整大小。

— stevemegson

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

— alex

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

— Michael Forrest

@Michael Forrest：您是否尝试过textarea：hover {调整大小：继承！important; }？我从未尝试过，只是一个猜测。

— Tamas Czinege

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

— Web_Designer 2011年

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

textarea {
    resize: none;
}

如果要对某些（但不是全部）TextArea元素禁用它，则有几个选项（感谢此页面）。

要禁用属性设置为（即）的特定项TextArea，请执行以下操作：namefoo<TextArea name="foo"></TextArea>

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

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

#foo {
    resize: none;
}

请注意，这仅与基于WebKit的浏览器（即Safari和Chrome）有关，后者向TextArea控件添加了调整大小的句柄。

— 高朗
source

-1

Safari最大高度最大宽度机会也可以在Firefox 4.0（b3pre）中使用。顺便说一句好例子：http：//www.alanedwardes.com/posts/safari-and-resizable-textboxes/

— 比特坦率
source