HTML & CSS – Disable resizable property of a textarea

Posted byR.KPosted inCSS, HTML

In this post we will be disabling the resizable property of a text area in HTML via CSS. The removal of this can be useful for example when wanting a text area to better suit the theme of the webpage or it could be the resizable element causes issues to your layout and other elements.

See the snippet of code below where we introduce a text area.

<!DOCTYPE html>
<html>
  <body>
    <p>
      <label for="myTextArea">HTML Text Area:</label>
    </p>
    <textarea id="myTextArea" name="myTextArea" rows="5" cols="40"></textarea>
  </body>
</html>

The above would output the following where the resizable property is present.

To remove this via CSS we would add the styling below to the text area.

textarea {
          resize: none;
        }

Our full source code would then be seen as.

<!DOCTYPE html>
<html>
  <body>
    <head>
      <style>
        textarea {
          resize: none;
        }
      </style>
    </head>
    <p>
      <label for="myTextArea">HTML Text Area:</label>
    </p>
    <textarea id="myTextArea" name="myTextArea" rows="5" cols="40"></textarea>
  </body>
</html>

Leave a Reply