Зміна розміру textarea в CSS

Вивчаємо властивість resize для керування можливістю зміни розміру textarea користувачем.

Зміна розміру textarea в CSS

За замовчуванням користувач може змінювати розмір елемента textarea за допомогою мишки. За це відповідає CSS-властивість resize.

Властивість resize

both — дозволяє змінювати ширину та висоту.
horizontal — дозволяє змінювати тільки ширину.
vertical — дозволяє змінювати тільки висоту.
none — повністю забороняє зміну розміру.
auto — значення за замовчуванням.

Заборона зміни розміру textarea

За допомогою resize: none можна прибрати можливість розтягувати поле вводу.

textarea {
  resize: none;
}

Зміна тільки по вертикалі

textarea {
  resize: vertical;
}

Зміна тільки по горизонталі

textarea {
  resize: horizontal;
}

Приклад використання

<textarea>
Напишіть повідомлення
</textarea>

textarea {
  width: 300px;
  height: 150px;

  padding: 10px;

  font-size: 16px;

  border: 1px solid #333;

  resize: vertical;
}

Практичне завдання

📌 Завдання:

№1. Створіть textarea шириною 300px і висотою 150px.
№2. Додайте CSS-властивість resize.
№3. Перевірте роботу значень vertical, horizontal та none.

<!-- Початковий код -->

<textarea>
Ваш текст
</textarea>

💡 Показати підказку

Якщо textarea використовується у формах, часто ставлять resize: vertical, щоб користувач міг збільшити поле для довгого тексту, але не ламав ширину макета.

✅ Показати відповідь

<textarea>
Ваш текст
</textarea>

<style>
textarea {
  width: 300px;
  height: 150px;
  resize: vertical;
}
</style>