Как запретить растягивание 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.

Написать комментарий

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-5cc0f7f5409d0539103117/] Ключевым является значение auto для левого и правого отступов. ...

Читать

 

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

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



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