我想禁用文本区域的可调整大小属性。
目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?
我想禁用文本区域的可调整大小属性。
目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?
当前回答
您可以像这样简单地禁用textarea属性:
textarea {
resize: none;
}
要禁用垂直或水平调整大小,请使用
resize: vertical;
or
resize: horizontal;
其他回答
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
我发现了两件事:
第一
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 */
参见演示
如果你需要深度支持,你可以使用一种老式的技巧:
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;
}
要禁用resize属性,请使用以下CSS属性:
resize: none;
您可以将其应用为内联样式属性,如下所示:<textarea style=“resize:none;”></textarea>或介于<style>之间</style>元素标记如下:文本区域{调整大小:无;}