Resize textarea - How to control textarea size using CSS?

It is very important to manage textarea sizes on your website. Because it can make a great user experience when they use it from different devices.

Resize textarea - control textarea size using CSS

Different ways to control the size of textarea

The different values of resizing textarea are none, both, vertical, horizontal, and inherit. Let's see how it works. 

None: It will prevent Textarea from being resized at all. 

Both: It will allow Textarea to get resized in any way (Horizontal and Vertical).

Horizontal: It makes Textarea only horizontally resizable.

Vertical: It makes Textarea only vertically resizable.

Inherit: This value sets this property to its default value.


textarea {resize: horizontal;}

resize: both enables the resize grabber. You will see a mark in the bottom-right corner. It will allow you to drug your mouse pointer in any way. 

To disable a specific Textarea you can use the name attribute.

textarea[name=paragraph] {resize: none;}
<textarea name="paragraph"></textarea>

Or, you can use the id as well as the class attribute.

#paragraph{resize: none;}
<textarea id="paragraph"></textarea>

You can set particular resizable dimensions using max-width, max-height, min-width, and min-height to specify a particular range. That is how you can control users from making any unnecessary size. 

To show a scrollbar. you'll have to set something like overflow: scroll.

To set the initial outlook you can set rows and cols to define width and height.

<textarea rows="13" cols="20"></textarea>