How to disable the resizable property of a textarea

featured Image

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.

Using a class:

<textarea class="textarea1"></textarea>
.textarea1{
    resize:none;
}

Using an id:

<textarea id="text-area"></textarea>
#text-area{
    resize:none;
}

Using name attribute:

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

<textarea name="text-area"></textarea>
textarea[name=text-area] {
  resize: none;
}

Related Posts

featured Image

Disable scrolling Behavior on a body with element on position fixed in mobile

Here in this article, we will learn on how to disable the scroll behavior of the body whenever we scroll over an element whose position is fixed in our mobile…

Read more
featured Image

How to Remove Underline from Links in Bootstrap.

In this article, we will learn how to remove the underline from anchor tags in Bootstrap. Just like any other HTML element, links can also be styled using CSS. We…

Read more
featured Image

How to remove bullets from unordered list using CSS

This is a short tutorial on how to remove bullets from an unordered list using CSS property. In CSS, we can remove the bullets by using the list-style-type property in…

Read more