Как запретить изменение размеров textarea на CSS/jQuery? | Pandoge

В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других элементов.

Как в HTML полностью запретить изменение размера textarea?

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

.wpcf7.wpcf7textarea{

    resize:none;

}

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Запретить растягивание

resize: none – запрещает растягивание textarea и убирает уголок ресайза.

textarea { resize: none; width: 400px; height: 150px;}

Старый метод:

textarea { min-width: 400px; max-width: 400px; max-height: 150px; min-height: 150px;}

Результат:

2

Синтаксис

селектор { resize: both | horizontal | vertical | none;}

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 21.09.2018

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Синтаксис

<textarea>текст</textarea>

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea name=”message” cols=”30″ rows=”4″ placeholder=”Введите сообщение”></textarea>

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

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

div{

   overflow:both;

   resize:auto;

}

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

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

Данная запись опубликована в 27.02.2017 21:22 и размещена в Танцы с CSS. Вы можете перейти в конец страницы и оставить ваш комментарий.

Рейтинг
( 1 оценка, среднее 5 из 5 )
Загрузка ...