Как запретить изменение размеров <textarea>?
Тема:
Формы
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 12.10+ | 5.0+ | 4.0+ | 1.0+ |
Задача
Сделать, чтобы размеры текстового поля созданного через тег <textarea> не изменялись при помощи мыши.
Решение
В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.
Рис. 1. Вид текстового поля в браузере Chrome
Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример 1).
Пример 1. Использование resize
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Размеры текстового поля</title>
<style>
textarea {
width: 90%; /* Ширина поля в процентах */
height: 200px; /* Высота поля в пикселах */
resize: none; /* Запрещаем изменять размер */
}
</style>
</head>
<body>
<form>
<textarea></textarea>
</form>
</body>
</html>
