Как запретить растягивание textarea

Тэг TextArea — незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый нижний угол. Сделано это с добрыми намерениями, но для верстальщика оборачивается не самыми приятными последствиями.

Вот пример формы, где разрешено изменение

До растягивания:

После изменения:

Видим, что пользователь может изменить размеры, нарушив задуманную геометрию верстки.

Запретить изменение размера TEXTAREA

Первая мысль — это полный запрет изменения размера. Достаточно добавить стиль:

У свойства resize есть и другие значения. См спецификацию:

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

Как ограничить изменение размера textarea?

Чтобы надежнее контролировать размеры поля, задайте предельные размеры поля в CSS.

Такие свойства ограничат изменение высоты textarea от 50 до 150 точек, с начальной высотой — 100px.

Аналогично можно работать и с шириной. Так поле будет можно менять только по-ширине в заданных пределах:

Браузерами не всегда поддерживается корректная работа с min-width, вместо этого вы можете получить диапазон от width до max-width.

Другие контейнеры и resize

CSS свойство resize работает и с другими HTML тегами, но по умолчанию оно задано как «resize: none;». Задав значение resize, не забудьте установить значение и для overflow:

Так, к примеру, получим растягивающиеся контейнеры DIV.

Мало букафф? Читайте есчо !

Способы прижать HTML элемент к нижнему краю экрана

Сентябрь 14, 2015 г.

Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт. Одна из таких задач, которая ...

Читать

И снова переносы в CSS

Ноябрь 30, 2021 г.

Да, вновь тема переносов, т.к. я уже писал небольшую статью, но еще раз возвращаюсь к данной теме с некоторыми новыми подробностями. Итак - разрыв слова, перенос текста на новую строку - рассмотрим, какие директивы даёт нам CSS для управления поведением ...

Читать

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать
 

Комментарии к «Как запретить растягивание textarea»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: