Languages
[Edit]
EN

CSS - how to disable textarea resize button/property?

6 points
Created by:
AnnLen
1777

Newest browsers introduced textarea resize button/property to make for users working with forms more comfortable.

Textarea resize button in Firefox.
Textarea resize button in Firefox.

Using CSS it is possible to remove the property in following ways.

1. resize: none example

This approach removes both direction resizing (vertical and horizontal).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    textarea {
        resize: none;
    }

  </style>
</head>
<body>
  <textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>

2. resize: horizontal example

This approach removes vertical resizing.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    textarea {
        resize: horizontal;
    }

  </style>
</head>
<body>
  <textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>

3. resize: vertical example

This approach removes horizontal resizing.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    textarea {
        resize: vertical;
    }

  </style>
</head>
<body>
  <textarea rows="10" cols="40">This is example text...</textarea>
</body>
</html>

Merged quastions

  1. How do I turn off the textarea resizing property?
Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.