resize: ручное изменение размера поля
resize определяет, может ли пользователь изменять размеры элемента с помощью предоставляемого браузером механизма.
Назначение
resize определяет, может ли пользователь изменять размеры элемента с помощью предоставляемого браузером механизма.
Как это работает
Для textarea удобно разрешить vertical и ограничить ширину контейнером. У обычных элементов применимость зависит от overflow и типа коробки. Наличие и вид ручки отличаются между платформами.
Пример
<style>
textarea{display:block;width:100%;max-width:30rem;min-height:6rem;box-sizing:border-box;resize:vertical}
</style>
<label for="long-note">Длинная заметка</label><textarea id="long-note">Высоту можно увеличить, если браузер предоставляет ручку изменения размера.</textarea>Что должно получиться
Поле ограничено по ширине и допускает вертикальное изменение размера на поддерживающих платформах. Минимальная высота сохраняет полезную область для ввода.
Граница применения и частая ошибка
Полный запрет resize у многострочного поля может затруднить чтение длинного сообщения. Если ограничение необходимо, обеспечьте достаточную высоту и удобную прокрутку.
Самостоятельная проверка
Введите много строк и попробуйте увеличить высоту. Уменьшите окно: поле не должно вытолкнуть страницу по горизонтали, даже если пользователь изменял его размер.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.