CSS 在 Safari 中隐藏 textarea 调整大小句柄
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/588089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding textarea resize handle in Safari
提问by david.mchonechase
I'm using textarea components in my application, and I control their height dynamically. As the user types, the height is increased whenever there is enough text. This works fine on IE, Firefox, and Safari.
我在我的应用程序中使用 textarea 组件，并动态控制它们的高度。当用户键入时，只要有足够的文本，高度就会增加。这在 IE、Firefox 和 Safari 上运行良好。
However, in Safari, there is a "handle" tool in the lower right that allows user to resize the textarea by clicking and dragging. I also noticed this issue with the textarea in the stackoverflow Ask a Question page. This tool is confusing and basically gets in the way.
但是，在 Safari 中，右下角有一个“手柄”工具，允许用户通过单击和拖动来调整文本区域的大小。我还注意到 stackoverflow Ask a Question 页面中 textarea 的这个问题。这个工具很混乱，基本上会妨碍。
So, is there anyway to hide this resize handle?
那么，无论如何要隐藏这个调整大小的手柄吗？
(I'm not sure if "handle" is the right word, but I cannot think of a better term.)
（我不确定“句柄”是否正确，但我想不出更好的词。）
回答by Tamas Czinege
You can override the resize behaviour with CSS:
您可以使用 CSS 覆盖调整大小行为：
textarea
{
resize: none;
}
or just simply
或者只是简单地
<textarea style="resize: none;">TEXT TEXT TEXT</textarea>
Valid properties are: both, horizontal, vertical, none
有效属性为：both、horizontal、vertical、none
回答by Gaurang P
Use the following CSS rule to disable this behavior for all TextAreaelements:
使用以下 CSS 规则为所有TextArea元素禁用此行为：
textarea {
resize: none;
}
If you want to disable it for some (but not all) TextAreaelements, you have a couple of options (thanks to this page).
如果您想为某些（但不是全部）TextArea元素禁用它，您有几个选项（感谢此页面）。
To disable a specific TextAreawith the nameattribute set to foo(i.e., <TextArea name="foo"></TextArea>):
要禁用特定TextArea与所述name属性设置为foo（即，<TextArea name="foo"></TextArea>）：
textarea[name=foo] {
resize: none;
}
Or, using an ID (i.e., <TextArea id="foo"></TextArea>):
或者，使用 ID（即<TextArea id="foo"></TextArea>）：
#foo {
resize: none;
}
Note that this is only relevant for WebKit-based browsers (i.e., Safari and Chrome), which add the resize handle to TextAreacontrols.
请注意，这仅与基于 WebKit 的浏览器（即 Safari 和 Chrome）相关，它们向TextArea控件添加了调整大小句柄。
回答by fortrabbit-frank
the safari max-height max-width opportunity also works in firefox 4.0 (b3pre). good example here by the way: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/
safari max-height max-width 机会也适用于 Firefox 4.0 (b3pre)。顺便说一下，这里的好例子：http: //www.alanedwardes.com/posts/safari-and-resizable-textboxes/
