Свойство resize

Свойство resize запрещает или разрешает изменение размеров textarea или других элементов (с другими элементами работает не во всех браузерах).

Синтаксис

cssселектор {
  resize: both | horizontal | vertical | none;
}

Значения

Значение	Описание
`both`	Можно растягивать элемент по ширине и высоте.
`horizontal`	Можно растягивать элемент только по ширине.
`vertical`	Можно растягивать элемент только по высоте.
`none`	Изменять размеры элемента нельзя.

Значение по умолчанию: none. Для textarea в некоторых браузерах: both. В тех браузерах, где нет поддержки resize, textarea будет вести себя так, будто задано значение none.

Пример . Значение both

Элемент растягивается в обе стороны:

html<textarea></textarea>

csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

Пример . Значение horizontal

Элемент растягивается только по горизонтали:

html<textarea></textarea>

csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

Пример . Значение vertical

Элемент растягивается только по вертикали:

html<textarea></textarea>

csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

Пример . Значение none

Элемент не растягивается вообще:

html<textarea></textarea>

csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

Пример . Ограничение ширины и высоты

Можно ограничить минимальную и максимальную ширину и высоту с помощью свойств max-width, min-width, max-height, min-height:

html<textarea></textarea>

csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат: