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.
You can use class
attribute in your tag(<textarea class="textarea1">
):
.textarea1 {
resize: none;
}
To disable a specific textarea
with the name
attribute set to foo
(i.e., <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Or, using an id
attribute (i.e., <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 Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/
Best Answer
Try the following, not sure which will work for all browsers or the browser you are working with, but it would be best to try all:
Or
...As suggested above
You can also try adding this, I never used it before, just saw it posted on a site today:
This last option would remove the ability to resize the
textarea
. You can find more information on the CSSresize
property here