How to disable the resizable property of a textarea

In this article, we will see quick ways to disable the resizable property of a textarea using CSS.

In CSS, we can disable it using the resize property. Set resize to none in textarea HTML element.

textarea{
    resize: none;
}

This will disable the resize property from all the textarea on your website or web page.

However, if you want to disable it only on a few textareas, then you can set a class or id and then use the resize: none on those classes or ids.

<u>Using a class:</u>

<textarea class="textarea1"></textarea>

.textarea1{
    resize:none;
}

<u>Using an id:</u>

<textarea id="text-area"></textarea>

#text-area{
    resize:none;
}

<u>Using name attribute:</u>

You can also disable a specific textarea using the name attribute.

<textarea name="text-area"></textarea>

textarea[name=text-area] {
  resize: none;
}