Languages
[Edit]
EN

CSS - how to disable textarea resize button/property?

6 points
Created by:
AnnLen
9180

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?
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join