如何禁用textarea的resizable属性？

HTML

乐米亚

2020-03-13

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

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

在此处输入图片说明

第1416篇《如何禁用textarea的resizable属性？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答
A梅 2020.03.13

Adding !important makes it work:

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

outline is just to avoid the blue outline on certain browsers.

西里A 2020.03.13

With @style, you can give it a custom size and disable the resize feature (resize: none;).

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

To disable the resize property, use the following CSS property:

resize: none;

  • You can either apply this as an inline style property like so:

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

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

    textarea {
    resize: none;
}
GO小胖 2020.03.13

You simply use: resize: none; in your CSS.

The resize property specifies whether or not an element is resizable by the user.

Note: The resize property applies to elements whose computed overflow value is something other than "visible".

Also resize not supported in Internet Explorer at the moment.

Here are different properties for resize:

No Resize:

textarea {
  resize: none;
}

Resize both ways (vertically & horizontally):

textarea {
  resize: both;
}

Resize vertically:

textarea {
  resize: vertical;
}

Resize horizontally:

textarea {
  resize: horizontal;
}

Also if you have width and height in your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.

A达蒙 2020.03.13

You can simply disable the textarea property like this:

textarea {
    resize: none;
}

To disable vertical or horizontal resizing, use

resize: vertical;

or

resize: horizontal;
逆天蛋蛋达蒙 2020.03.13

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

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;
}
神奇老丝 2020.03.13

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

textarea { resize: none; }

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

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

小小Jim 2020.03.13 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
村村乐 2020.03.13

在CSS中...

textarea {
    resize: none;
}
JinJin小卤蛋JinJin 2020.03.13

这可以用HTML轻松完成：

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

This works for me. The default value is true for the draggable attribute.

番长猿阳光 2020.03.13

我发现了两件事：

第一

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

在此处输入图片说明

  • 铬

在此处输入图片说明

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android