我想禁用的可调整大小的属性textarea。
目前，我可以textarea通过单击的右下角textarea并拖动鼠标来调整a 的大小。如何禁用此功能？
如何禁用textarea的resizable属性？
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;" })
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; }
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.
You can simply disable the textarea property like this:
textarea {
resize: none;
}
To disable vertical or horizontal resizing, use
resize: vertical;
or
resize: horizontal;
如果您需要深入的支持，则可以使用一种过时的技巧：
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 style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
在CSS中...
textarea {
resize: none;
}
这可以用HTML轻松完成：
<textarea name="textinput" draggable="false"></textarea>
This works for me. The default value is true for the draggable attribute.
我发现了两件事：
第一
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
- 铬
Adding
!importantmakes it work:outlineis just to avoid the blue outline on certain browsers.