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

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


当前回答

CSS3为UI元素提供了一个新属性,允许您执行此操作。该属性是resize属性。因此,您可以将以下内容添加到样式表中,以禁用所有文本区域元素的大小调整:

textarea { resize: none; }

这是一个CSS 3属性;使用兼容性图表查看浏览器兼容性。

就个人而言,我会发现在文本区域元素上禁用大小调整非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计不能容纳更大的文本区域,您可能需要重新考虑您的设计是如何工作的。任何用户都可以将textarea{resize:both!important;}添加到他们的用户样式表中,以覆盖您的偏好。

其他回答

您也可以尝试使用jQuery

$('textarea').css("resize", "none");

CSS 3可以解决这个问题。不幸的是,现在只有60%的浏览器支持它。

对于Internet Explorer和iOS,您不能关闭调整大小,但可以通过设置文本区域的宽度和高度来限制文本区域的大小。

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

参见演示

CSS3为UI元素提供了一个新属性,允许您执行此操作。该属性是resize属性。因此,您可以将以下内容添加到样式表中,以禁用所有文本区域元素的大小调整:

textarea { resize: none; }

这是一个CSS 3属性;使用兼容性图表查看浏览器兼容性。

就个人而言,我会发现在文本区域元素上禁用大小调整非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计不能容纳更大的文本区域,您可能需要重新考虑您的设计是如何工作的。任何用户都可以将textarea{resize:both!important;}添加到他们的用户样式表中,以覆盖您的偏好。

在CSS中。。。

textarea {
    resize: none;
}

使用此属性调整大小:无;

textarea {
  resize: none;
}