Свойство 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, max-height:

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

: