How do I disable the resizable property of a textarea?

Textarea resizing is a helpful UX feature when users are looking to post significant-sized content. As a general rule, you should allow resizing unless there is a specific reason or need to do so to accommodate your design.

When an element is resizeable, it has a little UI handle on a lower corner. The handle appears on the right on page elements when the page’s direction is set to ltr (left-to-right), and on the left on rtl (right-to-left) pages.

The CSS3 resize property controls if and how the user can resize an element by clicking and dragging the bottom right corner (on left-to-right page direction) of the element.

There are four allowable values for the resize property that are pretty self-explanatory:

• none: the textarea is not resizeable.
• both: The user can resize both the textarea height and width.
• vertical: The user can resize the textarea height.
• horizontal: The user can resize the textarea width.

.defaultResizing { resize:both; }
.noResizing { resize:none; }
.verticalOnlyResizing { resize:vertical; }
.horizontalOnlyResizing { resize:horizontal; }

Instead of completely disabling resizing, it's often better practice to constrain the amount of resizing a user can do with the max-height, max-width, min-height, and min-width CSS properties.

.mixMaxVerticalResize { 
    resize:vertical;
    min-height:100px;
    max-height:500px;
}