Question

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

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

Answer 1

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

textarea {
  resize: none;
}

要为某些（但不是全部）textarea禁用它，有一个couple of options。

禁用textarea属性设置为name的特定foo（即<textarea name="foo"></textarea>）：

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

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

#foo {
  resize: none;
}

W3C page列出了调整限制大小的可能值：none，both，horizontal，vertical和inherit：

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

查看一个不错的compatibility page，了解哪些浏览器目前支持此功能。正如Jon Hulka评论的那样，使用max-width，max-height，min-width和min-height，CSS中的维度可以是further restrained。

知道非常重要：

除非overflow属性不是可见的，否则此属性不执行任何操作，这是大多数元素的默认属性。所以一般来说，使用它，你必须设置像overflow：scroll;
这样的东西
Chris Coyier引用，   http://css-tricks.com/almanac/properties/r/resize/

Answer 2

在CSS ...

textarea {
    resize: none;
}

Answer 3

我发现了两件事

首先

textarea{resize:none}

这是一个尚未发布的css3 与Firefox4+ chrome and safari兼容

另一种格式功能是让overflow:auto摆脱考虑dir属性的正确滚动条

代码和不同的浏览器

基本HTML

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

某些浏览器

IE8

enter image description here

FF 17.0.1

enter image description here

chrome

enter image description here

Answer 4

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

textarea { resize: none; }

这是一个CSS3属性;使用compatibility chart查看浏览器兼容性。

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

Answer 5

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

Answer 6

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

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

Answer 7

这可以在html easy

中完成

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

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

Answer 8

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

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

注意： resize属性适用于计算溢出的元素   价值不是＆＃34;可见＆＃34;。

目前IE不支持调整大小。

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

没有调整大小：

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

垂直调整大小：

textarea { 
  resize: vertical; 
}

横向调整大小：

textarea { 
  resize: horizontal; 
}

此外，如果您的CSS或HTML中有width和height，则会阻止您的textarea调整大小，并支持更广泛的浏览器。

Answer 9

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

resize: none;

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

Answer 10

CSS3 can solve this problem. Unfortunately it's only supported on 60% of used browsers nowadays. For IE and iOS you can't turn off resizing but you can limit the textarea dimension by setting its width and height. /* One can also turn on/off specific axis. Defaults to both on. */ textarea { resize:vertical; } /* none|horizontal|vertical|both */ See Demo

Answer 11

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

textarea{
    resize: none;
}

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

resize: vertical;

或

resize: horizontal;

Answer 12

尝试一下：

#foo {
    resize: none;
}

<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>

Answer 13

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

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

Answer 14

禁用所有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;
}

Answer 15

您也可以尝试使用jQuery

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

Answer 16

添加！important使其有效：

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

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

Answer 17

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

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

Answer 18

textarea {
  resize: none;
}

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

 .not-resizable {
    resize: none;
 }

在你的 HTML 中

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

Answer 19

在reactjs中，您可以使用样式道具禁用调整大小的小部件。

<textarea id={"multiline-id"} ref={'my-ref'} style={{resize: "none"}} className="text-area-additional-styles" />

如何禁用textarea的resizable属性？

19 个答案:

知道非常重要：

代码和不同的浏览器