Как отключить функцию изменения размера для элемента <textarea>?

Браузеры на основе Webkit, такие как Safari Chrome, добавили новый UI элемент к правой нижней части текстовой области, позволяя пользователям изменить размер текстовой области простым нажатием мыши.

Не секрет, что WebKit имеет преимущество над другими браузерами в вопросе управления страницами и CSS функций. Одна из таких скрытых функций - это возможность регулирования размера текстовой области. Firefox дает такую же возможность в Firefox 4.

Если по каким-либо причинам вам необходимо удалить функцию изменения размера вашей текстовой области, CSS3 дает такую возможность контролирования.

В этой статье вы научитесь, как сделать, чтобы HTML элемент <textarea> имел фиксированный неизменяемый размер.

Для того, чтобы размер текстового поля не изменился, можно использовать CSS свойство resize со значением "none".

Добавьте этот отрывок кода в ваш стиль текстовой области:

textarea {
  resize: none;
}

После этого можно использовать свойства height и width для установления фиксированной высоты и ширины (height и width) для вашего элемента текстовой области.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .comment {
      resize: none;
      height: 100px;
      width: 350px;
      }
    </style>
  </head>
  <body>
    <h2>Текстовая область с фиксированной шириной и высотой</h2>
    <form> 
      <textarea class="comment">Отправьте автору ваши комментарии </textarea><br>
      <input type="submit" name="submitInfo" value="Submit">
    </form>
  </body>
</html>

Попробуйте сами!

Или можно задать размер элемента <textarea> с помощью установления атрибутов cols и rows, которые указывают фиксированное количество колонок и строк.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .comment {
      resize: none;
      }
    </style>
  </head>
  <body>
    <form> 
      <textarea class="comment" rows="10" cols="40">Отправьте автору ваши комментарии.</textarea><br>
      <input type="submit" name="submitInfo" value="Submit">
    </form>
  </body>
</html>

Попробуйте сами!

Можно также разрешить пользователям изменить размер элемента <textarea> только по горизонтали и вертикали с помощью свойства resize со значением "vertical" или "horizontal".

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .vertical { 
      resize: vertical; 
      }
      .horizontal { 
      resize: horizontal; 
      }
    </style>
  </head>
  <body>
    <h2>Измените размер текстовой области только по вертикали</h2>
    <form>
      <textarea class="vertical" rows="8" cols="50">Отправьте автору ваши комментарии.</textarea>
      <h2>Измените размер текстовой области только по горизонтали</h2>
      <textarea class="horizontal" rows="8" cols="50">Отправьте автору ваши комментарии.</textarea>
    </form>
  </body>
</html>

Попробуйте сами!

Изменение размера текстовой области очень полезно, когда вам необходимо печатать длинное сообщение. Конечно, иногда для сохранения дизайна вам может понадобиться отключить функцию изменения размера текстовой области. Но будет лучше разрешить изменение размера элемента.