html - 如何禁用textarea的resizable属性？(How do I disable the resizable property of a textarea?)

Question

I want to disable the resizable property of a textarea .

(我想禁用textarea的resizable属性。)

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

(目前，我可以调整一个textarea通过点击的右下角textarea并拖动鼠标。)

How can I disable this?

(如何禁用此功能？)

  ask by user549757 translate from so

Answer 1

The following CSS rule disables resizing behavior for textarea elements:

(以下CSS规则禁用了textarea元素的大小调整行为：)

textarea {
  resize: none;
}

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

(要针对某些（但不是全部） textarea禁用它，有两个选项 。)

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

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

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

Or, using an id attribute (ie, <textarea id="foo"></textarea> ):

(或者，使用id属性（即<textarea id="foo"></textarea> ）：)

#foo {
  resize: none;
}

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

(W3C页面列出了可能的大小调整限制值：无，水平，垂直和继承都没有：)

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

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.

(正如Jon Hulka所说，可以在CSS中使用max-width，max-height，min-width和min-height 进一步限制尺寸。)

Super important to know: (要知道的超级重要：)

This property does nothing unless the overflow property is something other than visible, which is the default for most elements.

(除非overflow属性是可见的以外的其他属性，否则此属性将不执行任何操作。)

So generally to use this, you'll have to set something like overflow: scroll;

(因此，通常要使用此功能，您必须设置类似overflow的内容：)

Quote by Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/

(克里斯·科耶尔（Chris Coyier）的报价， http： //css-tricks.com/almanac/properties/r/resize/)