Перейти к содержанию

resize

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

Интерфейс

Синтаксис

/* 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, а не оставляйте его по умолчанию.

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

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

Спецификации

Поддержка браузерами

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

Описание и примеры

<!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>