resize CSS

Свойство resize указывает, можно ли пользователю изменять размеры текстового поля.

Значение по умолчанию:

none

Наследуется:
Нет
Применяется:

К <textarea> или к любому элементу, у которого свойство overflow отличается от visible

Анимируется:
Нет
Объект JavaScript:

object.style.resize

Спецификации:
Поддержка браузерами:

Can I Use css-resize? Data on support for the css-resize feature across the major browsers from caniuse.com.

Синтаксис

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

Значения

  • none — Размеры элемента не изменяются.
  • both — Можно изменять размеры элемента по горизонтали и вертикали.
  • horizontal — Можно изменять размеры элемента только по горизонтали.
  • vertical — Можно изменять размеры элемента только по вертикали.

Примечание

Хотя по умолчанию значение установлено как none, многие браузеры самостоятельно меняют его на both. Если вы не хотите, чтобы размер поля изменялся, задавайте явное значение none, а не оставляйте его по умолчанию.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>resize</title>
  <style>
   textarea { resize: both; }
  </style>
 </head>
 <body>
  <p>Потяните за правый уголок, чтобы изменить размер текстового поля.</p>
  <p><textarea cols="30" rows="7"></textarea></p>
 </body>
</html>