Свойство resize

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

Синтаксис

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

Значения

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

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

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

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

<textarea></textarea>

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

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

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

<textarea></textarea>

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

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

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

<textarea></textarea>

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

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

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

<textarea></textarea>

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

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

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

<textarea></textarea>

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