如何禁用textarea的resizable属性？ [英] How to disable resizable property of textarea?

问题描述

我想禁用 textarea 的resizable属性。

目前，我可以调整<$然后单击 textarea 的右下角并拖动鼠标，即可转到c $ c> textarea 。如何禁用此功能？

解决方案

以下CSS规则禁用 textarea 元素：

  textarea {
 resize：none; 
} 
  

要禁用某些（但不是全部） textarea 中，有一个几个选项。 p>

要禁用 textarea ，将 name 属性设置为 foo （即< textarea name =foo>< / textarea> ）：

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

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

  #foo {
 resize：none; 
} 
  

W3C页面列出了调整大小限制的可能值：none，both，horizo​​ntal，vertical和inherit：

  textarea {
 resize：vertical; / *用户可以垂直调整，但宽度固定* / 
} 
  

兼容性页面以查看当前支持此功能的浏览器。正如Jon Hulka所评论的，尺寸可以在CSS中进一步限制，使用max-width，max-height，min-width和

> 除非overflow属性是除visible之外的其他值，这是大多数元素的默认值。所以一般使用这个，你将不得不设置像overflow：scroll;

由Chris Coyier引用，
http://css-tricks.com/almanac/properties/r/resize/

I want to disable the resizable property of a 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?

解决方案

The following CSS rule disables resizing behavior for textarea elements:

textarea {
    resize: none;
}

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

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

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

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

#foo {
    resize: none;
}

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 */
}

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.

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;

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

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