How to disable resizable property of textarea?
I want to disable the resizable property of a textarea .
Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
The following CSS rule disables resizing behavior for textarea elements:
textarea {
resize: none;
}
To disable it for some (but not all) textarea s, there are a couple of options.
To disable a specific textarea with the name attribute set to foo (ie, <textarea name="foo"></textarea> ):
textarea[name=foo] {
resize: none;
}
Or, using an id attribute (ie, <textarea id="foo"></textarea> ):
#foo {
resize: none;
}
The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.
Super important to know:
This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;
Quote by Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
在CSS中...
textarea {
resize: none;
}
I found 2 things
first
textarea{resize:none}
this is a css3 which is not released yet compatable with Firefox4+ chrome and safari
another format feature is to overflow:auto to get rid of the right scrollbar taking into account dir attribute
code and different browsers
Basic html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Some browsers
上一篇: 浮点数学是否被破坏？