How to disable textarea resizing

If we add a simple textarea in a HTML form then we see that we can resize it by clicking on the bottom right corner of the textarea and dragging the mouse. 

<textarea id="txt1" name="txt1" rows="5" cols="50"></textarea>

 

If we want to stop this resize then you have to just add a simple css as shown below.

textarea {

    resize: none;

}

 

If we want to allow the user to resize vertically then use the below css.

textarea {

    resize: vertical;

}

 

Similarly for horizontal resizing we add

textarea {

    resize: horizontal;

}

 

Please note that ‘resize’ property is not suppoted by IE browser so you will have to look some other solution for IE.

 

Leave a Comment

Back to top