Languages
[Edit]
EN

CSS - how to disable textarea resize button/property?

6 points
Created by:
AnnLen
11500

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
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join