问题如何禁用textarea的resizable属性？

我想禁用一个可调整大小的属性 textarea。

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

4848

2018-03-08 16:15

起源

@JDIsaacks。我不同意。这就像是说让用户从文本框和按钮中删除自定义样式非常容易。这是我的网站，这是我的设计。我不希望它看起来像windows / mac / etc，我希望它看起来像我的应用程序/网站。 - Paul Fleming

@JDIsaaks - 此外，允许在某些情况下调整大小可能会破坏布局和原理（当前任务关键型项目的一个重要方面）。 - cale_b

有时你真的想要一个不可调整大小的textarea。例如，在这种情况下，当您（有条件地）将textarea转换为看起来像标签的东西时。如果标签上有一个随机浮动抓取器，那么看起来真的很奇怪。 - neminem

@Gherman在我看来，软件设计是最高水平的艺术形式之一，你的书籍类比没有任何意义。 - quemeful

答案:

以下CSS规则禁用了大小调整行为 textarea 内容：

textarea {
  resize: none;
}

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

禁用特定的 textarea 随着 name 属性设置为 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中使用max-width，max-height，min-width和min-height。

知道非常重要：

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

引用Chris Coyier， http://css-tricks.com/almanac/properties/r/resize/

2872

2018-03-08 16:17

是否有Firefox，Opera和/或IE的解决方案？ - Šime Vidas

@ŠimeIE和FF3（及更早版本）不添加支持调整大小，因此不需要为它们提供解决方案。对于FF4，此解决方案应该可行。 - Donut

按照 davidwalsh.name/textarea-resize - 使用resize：vertical或resize：horizontal来约束调整大小到一个维度。或使用max-width，max-height，min-width和min-height中的任何一个。 - Jon Hulka

我是唯一一个发现使用css而不是属性来设置它的人吗？为什么我不能使用CSS设置禁用或检查或其他属性... - Buksy

@Buksy因为“禁用”是一个状态，而不是一个视觉属性。因此，它不应该由a决定是合乎逻辑的造型语言。 - Kroltan

在CSS ...

textarea {
    resize: none;
}

174

2018-03-08 16:17

我个人更喜欢这个答案。到了这一点。 - quemeful

我发现了两件事

第一

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>

一些浏览器

enter image description here

FF 17.0.1

enter image description here

2017-12-27 20:58

CSS3有一个新的UI元素属性，可以让你这样做。该物业是调整财产大小。因此，您需要将以下内容添加到样式表中以禁用所有textarea元素的大小调整：

textarea { resize: none; }

这是一个CSS3属性;用一个兼容性图表看看浏览器兼容性。

就个人而言，我觉得在textarea元素上禁用resize非常烦人。这是设计师试图“打破”用户客户端的情况之一。如果您的设计无法容纳更大的文本区域，您可能需要重新考虑设计的工作方式。任何用户都可以添加 textarea { resize: both !important; } 到他们的用户样式表来覆盖您的偏好。

2018-03-08 16:35

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

2017-11-06 09:19

如果您需要深度支持，您可以使用旧式技术

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;
}

2018-02-12 12:14

也用 resize:none 用这个解决方案来防止手柄出现在底角，这令人沮丧地不起作用。 - MacroMan

这可以在html中轻松完成

<textarea name="textinput" draggable="false"></textarea>

这对我有用。默认值是 true 对于 draggable 属性。

2017-07-21 05:18

这是HTML 5属性，因此只有较新的浏览器才支持。我读过IE从9开始支持它的地方。 - Antony D'Andrea

这适用于大多数浏览器。在每个最新的浏览器。 - Thusitha Wickramasinghe

它不会阻止textarea重新调整大小 - Mishko Vladimir

你只需使用： resize: none; 在你的CSS中。

该调整 property指定元素是否可调整大小由用户。

注意： resize属性适用于计算溢出的元素价值不是“可见的”。

也调整 IE目前不支持。

以下是调整大小的不同属性：

没有调整大小：

textarea { 
  resize: none; 
}

调整两种方式（垂直和水平）：

textarea { 
  resize: both; 
}

垂直调整大小：

textarea { 
  resize: vertical; 
}

水平调整大小：

textarea { 
  resize: horizontal; 
}

如果你有的话 width 和 height 在您的CSS或HTML中，它将阻止您的textarea调整大小，具有更广泛的浏览器支持。

2018-06-01 13:11

要禁用resize属性，请使用以下CSS属性：

resize: none;

您可以将其应用为内联样式属性，如下所示：
```
<textarea style="resize: none;"></textarea>
```
或者在两者之间 <style>...</style> 元素标签如下：
```
textarea {
    resize: none;
}
```

2018-06-12 10:43

CSS3可以解决这个问题。不幸的是，它只支持 60％的浏览器使用率如今。

对于IE和iOS，您无法关闭调整大小，但您可以限制 textarea 通过设置它的尺寸 width 和 height。

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

见演示

2017-10-30 23:26

添加！important使其有效：

width:325px !important; height:120px !important; outline:none !important;

大纲只是为了避免某些浏览器上的蓝色轮廓

2018-02-03 19:07

不要滥用 !important 属性。如果CSS属性没有意义修复宽度和高度 resize: none 可以删除调整大小功能 - Raptor

问题 如何禁用textarea的resizable属性？

答案:

知道非常重要：

代码和不同的浏览器

热门问题

问题如何禁用textarea的resizable属性？