我想禁用文本区域的可调整大小属性。
目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?
我想禁用文本区域的可调整大小属性。
目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?
当前回答
CSS3为UI元素提供了一个新属性,允许您执行此操作。该属性是resize属性。因此,您可以将以下内容添加到样式表中,以禁用所有文本区域元素的大小调整:
textarea { resize: none; }
这是一个CSS 3属性;使用兼容性图表查看浏览器兼容性。
就个人而言,我会发现在文本区域元素上禁用大小调整非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计不能容纳更大的文本区域,您可能需要重新考虑您的设计是如何工作的。任何用户都可以将textarea{resize:both!important;}添加到他们的用户样式表中,以覆盖您的偏好。
其他回答
CSS3为UI元素提供了一个新属性,允许您执行此操作。该属性是resize属性。因此,您可以将以下内容添加到样式表中,以禁用所有文本区域元素的大小调整:
textarea { resize: none; }
这是一个CSS 3属性;使用兼容性图表查看浏览器兼容性。
就个人而言,我会发现在文本区域元素上禁用大小调整非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计不能容纳更大的文本区域,您可能需要重新考虑您的设计是如何工作的。任何用户都可以将textarea{resize:both!important;}添加到他们的用户样式表中,以覆盖您的偏好。
在CSS中。。。
textarea {
resize: none;
}
我发现了两件事:
第一
textarea{resize: none}
这是一个尚未发布的CSS 3,与Firefox 4(及更高版本)、Chrome和Safari兼容。
另一个格式特性是溢出:考虑到dir属性,自动删除右滚动条。
代码和不同的浏览器
基本HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
某些浏览器
Internet Explorer 8
Firefox 17.0.1
铬
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 */
参见演示
以下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/