How to disable the resizable property of a textarea

By default, the HTML textarea has a resizable property at the right-bottom corner of it. By dragging it, we can change the height and width of the textarea. But if you want to hide this feature, In this article, we are going to learn how to disable the resizable property of a textarea using css.

How disable the resize property of a textarea.

CSS provides a property named resize:;, by using this property, we can disable it.

Disable the resizable property of a textarea
<textarea cols='40' rows='8'>
   Default textarea. You can resize this textarea by clicking on the bottom right corner of it and dragging the mouse. 
</textarea>
<textarea style='resize:none;margin-top:8px' cols='40' rows='8'>
   Disabled the resizable property.
</textarea>
Try it Yourself »

Resize a textarea only vertically.

We can disable the resizable property of a textarea using the resize:none property. We can also add the resizable property of a textarea vertically or horizontally using resize:vertical and resize:horizontal.

Resize a textarea vertically or horizontally
<textarea style='resize:vertical' cols='40' rows='8'>
   Vertically
</textarea>
<textarea style='resize:horizontal;margin-top:8px' cols='40' rows='8'>
   Horizontally
</textarea>
Try it Yourself »

Conclusion

In this article, you have learned how to disable the resizable property of a textarea using css.