resize

Можно ли увеличить или уменьшить поле ввода? Управляем этим через стили.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство 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.