Отключение возможности изменения размера textarea в HTML

Быстрый ответ

Чтобы отключить возможность изменения размера поля ввода textarea, достаточно применить к нему CSS-свойство resize со значением none. В результате регулятор размера для поля textarea исчезнет, и его размер станет неизменяемым.

textarea { resize: none; /* Регулятор размера пропал */ }

Подробное руководство по настройке и альтернативы

Ограничьте изменение размера

Если вы хотите задать ограничения на размер, воспользуйтесь такими CSS-свойствами, как max-width, max-height, min-width и min-height. Это ограничит поле textarea и не позволит ему выйти за рамки указанных размеров:

textarea {
  resize: both;
  max-width: 500px; /* Задаем максимальную ширину */
  max-height: 300px; /* Задаем максимальную высоту */
  min-width: 200px; /* Задаем минимальную ширину */
  min-height: 100px; /* Задаем минимальную высоту */
}

Подробнее об этом расскажет наш спикер на видео

Допустите изменение размера только в одном направлении

Если разрешать изменение размера в обоих направлениях считаете нежелательным, разрешите его только в одном – вертикальном или горизонтальном:

/* Разрешаем только вертикальное изменение размера */
textarea { resize: vertical; /* Только вверх */ }

/* Разрешаем только горизонтальное изменение размера */
textarea { resize: horizontal; /* Только вширь */ }

Точная настройка с использованием классов и ID

Задайте resize: none; через класс или ID для конкретного поля textarea, чтобы запретить ему изменение размера:

/* По классу */
.textarea-nonresizable { resize: none; /* Здесь изменение размера недоступно */ }

/* По ID */
#uniqueTextarea { resize: none; /* Я уникален и не хочу менять размер */ }

Влияние свойства overflow

Учтите, что свойство resize работает только если overflow не равен visible. Помните об этом при стилизации поля textarea:

textarea {
  overflow: auto;
  resize: none; /* Спасибо, overflow, за поддержку! */
}

Проверьте поддержку вашего браузера

CSS-свойство resize может быть несовместимо со старыми версиями браузеров. Поэтому на всякий случай проверьте в Can I use....

Не отключайте изменение размера без нужды!

Дважды или даже трижды подумайте, прежде чем отключать изменение размера. Возможно, вашим пользователям это потребуется, так что будьте аккуратны!

Визуализация

Представьте элемент textarea как окно в старинном здании:

Окно Старого Здания, Шаг 1: [🏚️🪟✨]
- Хотите расширить? Уменьшить? Просто тяните за края окна. Всё возможно.

Теперь примените код, запрещающий изменение размера:

textarea {
  resize: none; /* Изменение размера окна запрещено по-распоряжению владельца! */
}

Окно Старого Здания, Шаг 2: [🏚️🔒🪟]
- Размер окна зафиксирован. Изменения строго запрещены!

Дополнительные советы и трюки для усовершенствования вашего textarea

Используйте атрибут placeholder для подсказок!

Атрибут placeholder предназначен для демонстрации текстовых подсказок, которые помогают пользователям понять, что нужно вводить в поле. Он сделан для удобства пользователей, не так ли?

<textarea placeholder="Напишите здесь свои гениальные мысли"></textarea>

Установите количество строк в textarea для контроля видимой высоты

Воспользуйтесь атрибутом rows, чтобы настроить видимую высоту:

<textarea rows="4">   /* Высота соответствует четырем строкам текста — просто и удобно! */
</textarea>

Встроенное стилизование для быстрых исправлений и тестов

Если вы хотите быстро что-то исправить или протестировать, воспользуйтесь встроенной стилизацией:

<textarea style="resize: none;">  /* Вот и все, я неподвижен! */
</textarea>

Кастомизация — это важно

Возможно, пользователи пожелают переопределить стили для более удобной работы. Используйте !important для того, чтобы гарантировать, что некоторые стили будут сохранены:

.textarea-on-steroids {
  resize: both !important; /* Ощутите двойную силу изменения размера! */
}

Помимо этого, всегда помните о важности учета предпочтений пользователя и необходимости обеспечения гибкости использования элементов.

Полезные материалы

1. <textarea>: The Textarea element – HTML | MDN — Наглядное руководство для изучения элемента и его атрибутов <textarea>.
2. CSS resize property – W3Schools — Основы и нюансы работы со свойством CSS resize.
3. CSS resize property – MDN – Подробное исследование от MDN свойства resize CSS.
4. resize | CSS-Tricks — Ваш справочник по свойству CSS resize.
5. "resize" | Can I use... — Сведения о кросс-браузерной совместимости свойства CSS resize.
6. Sizing Units | web.dev — Подробная информация о управлении изменением размеров элементов и единицах измерения в CSS.