协慌网

 登录 贡献 社区

如何禁用 textarea 的 resizable 属性？

我想禁用textarea的 resizable 属性。

目前，我可以调整一个textarea通过点击的右下角textarea并拖动鼠标。我怎么能禁用它？

答案

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

textarea {
  resize: none;
}

要为某些（但不是全部） textarea s 禁用它，有几个选项 。

要禁用name属性设置为foo的特定textarea （即<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; /* user can resize vertically, but width is fixed */
}

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

知道非常重要：

除非 overflow 属性不是可见的，否则此属性不执行任何操作，这是大多数元素的默认属性。所以一般来说，使用它，你必须设置像 overflow：scroll;

引自 Chris Coyier， http： //css-tricks.com/almanac/properties/r/resize/

在 CSS ... 

textarea {
    resize: none;
}

我发现了两件事

第一

textarea{resize:none}

这是一个 css3 ，尚未发布，但与Firefox4 + chrome 和 safari兼容

另一种格式功能是溢出：自动去除右侧滚动条考虑到dir属性

代码和不同的浏览器

基本的 HTML 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

一些浏览器

  • IE8

在此处输入图像描述

  • FF 17.0.1

在此处输入图像描述

  • 铬

在此处输入图像描述