Войти
Регистрация

Как запретить измененение размера textarea

Как запретить измененение размера textarea?

Приветствую Вас, друзья.

Я часто сталкивался с такой ситуацией, когда на сайте, например в форме регистрации или иной другой форме, было текстовое поле с тегом <textarea>, которое можно было расстягивать во все стороны.

Это, конечно удобно, но такое растягивание часто ломало верстку и выглядело не красиво.

В этой статье я Вам расскажу как управлять расстягиванием текстового поля по высоте, ширине или вообще запретить изменение размера.

И так, допустим есть у нас текстовое поле <textarea>

<textarea></textarea>

Мы хотим задать ему ширину в 200 пикселей и высоту 100 пикселей. И нам бы не хотелось, чтобы посетитель сайта мог изменять ширину. Даже если Вы установите фиксированную ширину и высоту этому полю, изменять его размеры все-равно можно будет.

Чтобы запретить изменение ширины, нам достаточно прописать следующие стили CSS для этого поля:

textarea {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

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

Чтобы запретить расстягивание по высоте, делаем тоже самое, но с высотой:

textarea {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
}

Если мы хотим полностью запретить растягивание по ширине и по высоте, то пишем простое CSS свойство resize:none

textarea {
  resize: none;
}

Таким образом у текстового поля не будет расстгивания ни в какую сторону.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?