如何禁用textarea的resizable属性? [英] How do I disable the resizable property of a textarea?

问题描述

我想禁用textarea的可调整大小的属性.

I want to disable the resizable property of a textarea.

当前，我可以通过单击textarea的右下角并拖动鼠标来调整textarea的大小.如何禁用此功能?

Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

推荐答案

以下CSS规则禁用 textarea 元素:

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

要在某些(但不是全部)textarea中禁用它，请使用

To disable it for some (but not all) textareas, there are a couple of options.

要在name属性设置为foo(即<textarea name="foo"></textarea>)的情况下禁用特定的textarea:

To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea>):

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

或者使用id属性(即<textarea id="foo"></textarea>):

#foo {
  resize: none;
}

W3C页面列出了可能的调整大小限制值:无，两者，水平，垂直和继承:

The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

查看一个体面的兼容性页面，以查看当前哪些浏览器支持此功能.正如乔恩·赫尔卡(Jon Hulka)所评论的那样，尺寸可以在CSS中使用最大宽度，最大高度，最小宽度和最小高度.

Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.

要知道的非常重要:

该属性不执行任何操作，除非overflow属性是可见的以外的其他东西，这是大多数元素的默认设置.因此，通常要使用此功能，必须设置类似overflow的内容:scroll;

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;

Sara Cope的名言， http://css-tricks.com/almanac/properties/r/resize/

Quote by Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

这篇关于如何禁用textarea的resizable属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！