How to Disable the Resizing of the <textarea> Element?

Webkit-based browsers such as Chrome, Safari, have attached a new UI element to the bottom-right of text areas allowing the user to resize the textarea size just by clicking it and moving the mouse.

As we know, WebKit has a privilege over other browsers in page control and CSS features. One of these “hidden” features is the possibility to regulate the textarea resizing. Firefox has provided the same feature in Firefox 4.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

How to control the textarea resizing with CSS3

In this article, we are going to learn how to make the HTML <textarea> element have a fixed, unchangeable size.

To prevent a text field from being resized, you can use the CSS resize property with its "none" value.

Add this piece of code to your textarea style:

textarea {
  resize: none;
}

After it you can use the height and width properties to define a fixed height and width for your <textarea> element.

Example of disabling the resizing of the <textarea> element by using a fixed height and width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
        resize: none;
        height: 100px;
        width: 350px;
      }
    </style>
  </head>
  <body>
    <h2>Textarea with fixed width and height</h2>
    <form action="/form/submit" method="post">
      <textarea class="comment">Send your comments to the author.</textarea>
      <br>
      <input type="submit" name="submitInfo" value="Submit">
    </form>
  </body>
</html>

Result

Textarea with fixed width and height

Or you can provide your <textarea> size just by setting the cols and rows attributes defining the fixed number of the columns and rows.

Example of disabling the resizing of the <textarea> element by using the cols and rows attributes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .comment {
        resize: none;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <textarea class="comment" rows="10" cols="40">Send your comments to the author.</textarea>
      <br>
      <input type="submit" name="submitInfo" value="Submit">
    </form>
  </body>
</html>

You can also choose to allow users to resize your <textarea> element only horizontally or vertically using the "vertical" or "horizontal" values of the resize property.

Example of disabling the resizing of the <textarea> element only vertically or horizontally:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .vertical {
        resize: vertical;
      }
      .horizontal {
        resize: horizontal;
      }
    </style>
  </head>
  <body>
    <h2>Resize the textarea only vertically</h2>
    <form action="/form/submit" method="post">
      <textarea class="vertical" rows="8" cols="50">Send your comments to the author.</textarea>
      <h2>Resize the textarea only horizontally</h2>
      <textarea class="horizontal" rows="8" cols="50">Send your comments to the author.</textarea>
    </form>
  </body>
</html>

Textarea resizing is beneficial when you're going to post a long text. Of course, often you may want to disable textarea resizing to keep your design, and it’s also remarkable. As a desired rule, however, you need to permit resizing.