如何禁用textarea的resizable属性？

2648

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

目前，我可以textarea通过点击的右下角textarea并拖动鼠标来调整a 的大小。如何禁用此功能？

在此处输入图片说明

html  css 
— 用户名
source
4
@JDIsaaks-此外，在某些情况下允许调整大小可能会破坏布局和可打印性（当前任务关键型项目的重要方面）。
— random_user_name 2012年
10
有时，您确实确实想要不可调整的文本区域。例如，在这种情况下，当您（有条件地）将文本区域转换为看起来像标签的内容时。带有随机浮动采集卡的标签到侧面看起来真的很奇怪。
— neminem 2015年
2
为了热爱一切美好的事物，请不要在实际的文本区域上这样做，否则您将疏远您的超级用户。破坏核心浏览器功能应被视为核心选择。
— superluminary

Answers:

3530

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

textarea {
  resize: none;
}

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

要禁用属性设置为（即）的特定项textarea，请执行以下操作：namefoo<textarea name="foo"></textarea>

textarea[name=foo] {
  resize: none;
}

或者，使用id属性（即<textarea id="foo"></textarea>）：

#foo {
  resize: none;
}

在W3C网页列出了调整限制可能的值：无，两者水平，垂直和继承：

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

查看良好的兼容性页面，以查看当前哪些浏览器支持此功能。正如Jon Hulka所说，可以在CSS中使用max-width，max-height，min-width和min-height 进一步限制尺寸。

要知道的超级重要：

除非overflow属性是可见的以外的其他属性，否则此属性将不执行任何操作。因此，通常要使用此功能，您必须设置类似overflow的内容：

萨拉·科普（Sara Cope）的报价， http：//css-tricks.com/almanac/properties/r/resize/

— 甜甜圈
source
有针对Firefox，Opera和/或IE的解决方案吗？
— 森那维达斯
6
@ŠimeIE和FF3（及更早版本）没有添加调整大小的支持，因此不需要针对它们的解决方案。对于FF4，此解决方案应该有效。
— 甜甜圈
24
按照davidwalsh.name/textarea-resize的规定 -使用resize：vertical或resize：horizo​​ntal将尺寸调整为一维。或使用最大宽度，最大高度，最小宽度和最小高度中的任何一个。
— 乔恩·赫尔卡
3
我是唯一发现使用css而不是属性进行设置的方法吗？为什么然后我不能使用CSS设置禁用或选中属性或其他属性呢？
— Buksy
6
@Buksy因为“禁用”是一种状态，而不是视觉属性。因此，逻辑不应该由样式语言决定。
— Kroltan's
105

我发现了两件事：

第一

textarea{resize: none}

这是CSS 3，尚未发布，与Firefox 4（及更高版本），Chrome和Safari兼容。

另一种格式功能是overflow: auto考虑到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

在此处输入图片说明

  • 铬

在此处输入图片说明

— 拉米（Rami Jamleh）
source
62

CSS 3为UI元素提供了一个新属性，使您可以执行此操作。该属性是resize属性。因此，您可以将以下内容添加到样式表中，以禁用所有textarea元素的大小调整：

textarea { resize: none; }

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

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

— 詹姆斯·萨姆纳斯
source
但这将是用户有意破坏其布局，而不是只需要调整其大小texarea并最终使某些东西无法使用的用户
— Redwolf Programs
21

如果您需要深入的支持，可以使用一种过时的技巧：

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;
}
— 叶夫根尼
source
7
还要resize:none与该解决方案一起使用，以防止手柄出现在无法正常使用的底角。
— MacroMan
13

这可以用HTML轻松完成：

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

这对我有用。默认值为true该draggable属性。

— 图西塔·威克拉玛辛格
source
这是HTML 5属性，因此仅支持较新的浏览器。我从9开始就在IE支持的地方阅读过。
— 安东尼·安德里亚
4
这适用于大多数浏览器。在每个最新的浏览器中。
— Suchitha Wickramasinghe 2015年
它不会阻止textarea调整大小
— Mishko Vladimir
@ AntonyD'Andrea这在最新的Chrome上不起作用
— Advait Junnarkar
6

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

resize: none;

  • 您可以将其用作内联样式属性，如下所示：

    <textarea style="resize: none;"></textarea>

  • 或在<style>...</style>元素标签之间，如下所示：

    textarea {
    resize: none;
}
— Webeng
source
6

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

的调整大小属性指定是否一个元件是由用户调整大小。

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

同时调整大小不是现在在Internet Explorer中的支持。

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

不调整大小：

textarea {
  resize: none;
}

双向调整大小（垂直和水平）：

textarea {
  resize: both;
}

垂直调整大小：

textarea {
  resize: vertical;
}

水平调整大小：

textarea {
  resize: horizontal;
}

此外，如果你有width和height你的CSS或HTML，它会阻止你的文字区域进行调整，以更广泛的浏览器的支持。

— 阿里雷扎
source
3

CSS 3可以解决此问题。不幸的是，目前只有60％的二手浏览器支持它。

对于Internet Explorer和iOS，您无法关闭调整大小，但是可以textarea通过设置其width和来限制尺寸height。

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

观看演示

— i
source
3

您可以像这样简单地禁用textarea属性：

textarea {
    resize: none;
}

要禁用垂直或水平调整大小，请使用

resize: vertical;

要么

resize: horizontal;
— 彼得·莫滕森
source
2

我创建了一个小演示，以显示调整大小属性的工作方式。我希望它对您和其他人也有帮助。

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
展开摘要

— 安布·卡纳（Ambuj Khanna）
source
1

使用时@style，可以为其提供自定义大小并禁用调整大小功能(resize: none;)。

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— 卡洛斯·德·耶稣·贝兹
source
1
您好，感谢您的回答，下次请格式化代码。
— Baptiste Mille-Mathias '18
这是基于asp.net MVC的答案。非常好。
— yogihosting
0

要为所有禁用调整大小textarea：

textarea {
    resize: none;
}

要禁用特定大小的调整大小textarea，请添加属性name，或id并将其设置为某种值。在这种情况下，它被命名为noresize

的HTML

<textarea name='noresize' id='noresize'> </textarea>

的CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}
— 阿卜克
source
-2

添加!important使其工作：

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

outline 只是为了避免某些浏览器出现蓝色轮廓。

— 产生
source
6
不要滥用!important属性。如果CSS属性resize: none可以删除调整大小功能，则无法固定宽度和高度
— Raptor
1
是不是!important邪恶？
— 彼得·莫滕森
在目前的Chrome浏览器中，此功能无法水平调整大小，但我仍然可以垂直调整textarea的大小。
— Advait Junnarkar
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.