HTML : Disable resizing of textarea

What is textarea?

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters.

How to resize texarea?

You can resize a textarea by…



What is textarea?

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters.



How to resize texarea?

You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.

Alt Text



How to disable resizing textarea?

The following CSS rule disables resizing behavior for textarea elements:

textarea {
  resize: none;
}

With above code all of your textareas will be disabled to resize.

You can use class attribute in your tag –

<textarea class="textarea1" rows="4" cols="50">
 Enter your message here...
</textarea>
.textarea1 {
  resize: none;
}

To disable a specific textarea with the name attribute set to foo

<textarea name="foo" rows="4" cols="50">
 Enter your message here...
</textarea>
textarea[name=foo] {
  resize: none;
}

Or, using an id attribute –

<textarea id="foo" rows="4" cols="50">
 Enter your message here...
</textarea>
#foo {
  resize: none;
}

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll;



Demo

resize has below values that you can use with your text areas –
none: the element is not resizeable.
both: the user can resize the element’s height and/or width.
horizontal: the user can resize the element horizontally (increasing the width).
vertical: the user can resize the element vertically (increasing the height).
inherit: the element inherits the resize value of its parent.

Below is the demo where you can click on the value names and can see the demo of selected value version of textarea –

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.


Print Share Comment Cite Upload Translate
APA
Rajesh Kumar Yadav | Sciencx (2024-03-29T01:21:09+00:00) » HTML : Disable resizing of textarea. Retrieved from https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/.
MLA
" » HTML : Disable resizing of textarea." Rajesh Kumar Yadav | Sciencx - Sunday May 30, 2021, https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/
HARVARD
Rajesh Kumar Yadav | Sciencx Sunday May 30, 2021 » HTML : Disable resizing of textarea., viewed 2024-03-29T01:21:09+00:00,<https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/>
VANCOUVER
Rajesh Kumar Yadav | Sciencx - » HTML : Disable resizing of textarea. [Internet]. [Accessed 2024-03-29T01:21:09+00:00]. Available from: https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/
CHICAGO
" » HTML : Disable resizing of textarea." Rajesh Kumar Yadav | Sciencx - Accessed 2024-03-29T01:21:09+00:00. https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/
IEEE
" » HTML : Disable resizing of textarea." Rajesh Kumar Yadav | Sciencx [Online]. Available: https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/. [Accessed: 2024-03-29T01:21:09+00:00]
rf:citation
» HTML : Disable resizing of textarea | Rajesh Kumar Yadav | Sciencx | https://www.scien.cx/2021/05/30/html-disable-resizing-of-textarea/ | 2024-03-29T01:21:09+00:00
https://github.com/addpipe/simple-recorderjs-demo