изменение размера

resize не применяется к следующим элементам:

• Элементы inline
• Элементы block, для которых свойство overflow установлено в visible или clip

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

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

Свойство resize задаётся одним ключевым словом из нижеприведённого списка.

none

Элемент не допускает изменения размера пользователем.

both

Элемент предоставляет механизм изменения размера по горизонтали и вертикали.

horizontal

Элемент предоставляет механизм изменения размера по горизонтали.

vertical

Элемент предоставляет механизм изменения размера по вертикали.

block

Элемент предоставляет механизм изменения размера по блочной оси (горизонтально или вертикально, в зависимости от значения writing-mode и direction).

inline

Элемент предоставляет механизм изменения размера по строчной оси (горизонтали или вертикали, в зависимости от значения writing-mode и direction).

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline      

Во многих браузерах элементы <textarea> по умолчанию изменяются в размерах. Это поведение можно переопределить, используя свойство resize.

HTML

<textarea>Type some text here.</textarea>

CSS

textarea {
  resize: none; /* Disables resizability */
}

Результат

Вы можете использовать свойство resize для изменения размера любого элемента. В примере ниже, изменяемый <div> содержит изменяемый абзац (<p> элемент).

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

Результат

• <textarea>