我想禁用文本区域的可调整大小属性。

目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?


当前回答

您可以像这样简单地禁用textarea属性:

textarea {
    resize: none;
}

要禁用垂直或水平调整大小,请使用

resize: vertical;

or

resize: horizontal;

其他回答

以下CSS规则禁用textarea元素的大小调整行为:

textarea {
  resize: none;
}

要禁用某些(但不是所有)文本区域,有几个选项。

您可以在标记中使用class属性(<textarea class=“textarea1”>):

.textarea1 {
  resize: none;
}

要禁用名称属性设置为foo的特定文本区域(即<textarea name=“foo”></textarea>):

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

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

#foo {
  resize: none;
}

W3C页面列出了调整大小限制的可能值:none、both、horizontal、vertical和inherit:

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

查看一个像样的兼容性页面,了解当前哪些浏览器支持此功能。正如Jon Hulka所评论的,CSS中可以使用最大宽度、最大高度、最小宽度和最小高度来进一步限制尺寸。

非常重要的是要知道:此属性不起作用,除非溢出属性不是可见的,这是大多数元素的默认值。因此,一般来说,要使用此选项,必须设置溢出:滚动;引自Sara Cope,http://css-tricks.com/almanac/properties/r/resize/

使用@style,您可以为其设置自定义大小并禁用调整大小功能(resize:none;)。

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

如果你需要深度支持,你可以使用一种老式的技巧:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}

在CSS中。。。

textarea {
    resize: none;
}
textarea {
  resize: none;
}

上面的代码将禁用项目中所有<textarea/>元素的可调整大小属性。如果您希望这样做很好,否则您将希望为textarea元素使用特定的类。

.not-resizable {
   resize: none;
}

在HTML中

<textarea class="not-resizable"></textarea>