resize

Свойство resize указывает, может ли пользователь изменять размеры элемента, и в каком направлении. В случае, если изменение размеров элемента возможно, в одном из его углов появится специальная иконка, похожая на треугольник, зажав которую пользователь сможет изменить размер элемента в одном, или нескольких, направлениях.

Часто используется для <textarea>, но можно применить к любому элементу, кроме:

• строчных (inline) элементов;
• блочных (block), для которых задано свойство overflow со значением visible (является значением по умолчанию для большинства элементов).

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

• none — размеры изменить нельзя (значение по умолчанию).
• both — размеры можно изменять по горизонтали и вертикали.
• horizontal — размер можно изменять по горизонтали.
• vertical — размер можно изменять по вертикали.

Экспериментальные значения:

• block — размер можно изменять в блочном измерении элемента.
• inline — размер можно изменять в строковом измерении элемента.

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

По умолчанию поддерживается в Firefox и Safari. В браузерах Chrome и Edge необходимо включить флаг Experimental Web Platform features. Более подробную информацию можно узнать на caniuse.

При применении свойства resize к картинкам (<img> или <picture>), видео (<video>) или фреймам (<iframe>), оно не будет работать. Но вы можете обернуть картинку в <div> или другую обёртку и задать ей возможность изменения размеров.

Когда пользователь изменяет размеры элемента, браузер устанавливает значения свойств width и height как инлайн стили на элемент. Если размер элемента изменяется только в одном из направлений, то устанавливается только одно из свойств. Об этом важно знать, так как могут возникнуть ситуации, в которых пользователь не сможет изменить размер элемента, например если какой-либо из селекторов установил значение свойств width или height с использованием !important.

💡 Если после применения свойства resize вы не можете изменить размер элемента, проверьте, что для свойства overflow задано одно из следующих значений: scroll, auto или hidden.

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

💡 В WebKit браузерах иконку растяжения элемента можно стилизовать с помощью специального псевдо класса ::-webkit-resizer.