Control textarea size on your website using CSS - Resize textarea

It is very important to manage textarea sizes on your website, so you may want to resize textarea.

It can make a great user experience when they use different devices.

Different ways to control the size of textarea

1. Use textarea selector itself 

You can directly use the textarea selector to change the size of it. Just define the property and values correctly. It will change all of your textarea styles on the page. 

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. 

2. Name attribute

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

textarea[name=paragraph] {resize: none;}

<textarea name="paragraph"></textarea>

3. Use id or class

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>

Different values for resizing property to resize 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.