如何禁用文本区域的可调整大小属性？

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

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

在此处输入图片描述

1695697 次浏览
小开
最佳答案

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

textarea {resize: none;}

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

您可以在标签（<textarea class="textarea1">）中使用class属性：

.textarea1 {resize: none;}

要禁用name属性设置为foo（即<textarea name="foo"></textarea>）的特定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-宽度、max-高度、min-宽度和min-高度，维度可以是进一步限制。

非常重要要知道：

除非overflow属性不是可见的，否则此属性什么都不做，这是大多数元素的默认值。所以通常要使用它，您必须设置类似overflow： scroll；

Sara Cope说：http://css-tricks.com/almanac/properties/r/resize/

小开

在CSS…

textarea {resize: none;}
小开

CSS 3为UI元素提供了一个新属性，允许您执行此操作。该属性是调整大小属性。因此，您需要将以下内容添加到样式表中以禁用所有文本区域元素的大小调整：

textarea { resize: none; }

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

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

小开

我发现了两件事：

第一

textarea{resize: none}

这是一个CSS 3，目前还没有公布，与Firefox 4（及更高版本）、Chrome和Safari兼容。

另一个格式特性是#0去掉右边的滚动条，考虑到目录属性。

代码和不同的浏览器

基本超文本标记语言

<!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

在此输入图片描述

  • Chrome

在此输入图片描述

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

添加!important使其工作：

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

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

小开

如果你需要深入的支持，你可以使用一个古老的学校技术：

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

这可以用超文本标记语言轻松完成：

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

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

小开

CSS 3可以解决这个问题。不幸的是，现在只支持60%的浏览器。

对于Internet Explorer和iOS，您不能关闭调整大小，但可以通过设置width和height来限制textarea维度。

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

查看演示

小开

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

resize: none;

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

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

  • or in between <style>...</style> element tags like so:

    textarea {resize: none;}
小开

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

textarea {resize: none;}

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

超文本标记语言

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

css

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

你也可以试试jQuery

$('textarea').css("resize", "none");
小开

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

调整属性指定元素是否可调整大小由用户。

备注： resize属性适用于其计算溢出的元素值是“可见”以外的东西。

目前Internet Explorer中也不支持调整。

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

没有调整大小：

textarea {resize: none;}

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

textarea {resize: both;}

垂直调整大小：

textarea {resize: vertical;}

水平调整大小：

textarea {resize: horizontal;}

此外，如果您的CSS或超文本标记语言中有width和height，它将阻止您的文本区域调整大小，并提供更广泛的浏览器支持。

小开

你可以像这样简单地禁用文本区属性：

textarea {resize: none;}

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

resize: vertical;

或

resize: horizontal;
小开

使用@style，您可以给它一个自定义大小并禁用调整大小功能(resize: none;)。

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
小开

我创建了一个小演示来展示调整属性的工作原理。我希望它能帮助你和其他人。

.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>

小开 
textarea {resize: none;}

上面的代码将禁用项目中所有<textarea/>元素的可调整大小属性。如果你愿意，那很好，否则你会想为你的文本区域元素使用特定的类。

.not-resizable {resize: none;}

用你的超文本标记语言

<textarea class="not-resizable"></textarea>
小开

使用此属性resize: none;

textarea {resize: none;}
小开

您需要在component.css中设置以下CSS代码

textarea {resize: none;}

提交答案