Категория > Формы > Запретить изменение размеров - «Формы»

Запретить изменение размеров - «Формы»

27-03-2016, 12:30. Автор: Administrator

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>

Перейти обратно к новости