Свойство CSS `resize`

Свойство resize CSS задаёт, можно ли изменить размер элемента и, если можно, в каких направлениях.

Попробуйте

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

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

• Строчные элементы
• Блочные элементы, для которых свойство 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;

Значения

Это свойство задаётся одним из следующих ключевых слов:

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 с произвольными элементами

С помощью свойства 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>