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

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

Ви можете вказати, чи може користувач змінювати розмір елемента по горизонталі, вертикалі, в обох напрямках або взагалі заборонити таку можливість.

Властивість resize не слід плутати з властивістю overflow, що дозволяє вказати, що має відбутися, якщо вміст елемента занадто великий, щоб він містився всередині поля. У цьому випадку ви можете вказати, що в полі має з'являтися смуга прокрутки, приховувати вміст або що вміст не слід обрізати (тобто він повинен з'явитися поза рамкою). Однак це не те ж саме, що і властивість зміни розміру, що дозволяє користувачеві змінювати розмір блоку.

правити

Нотатка

Властивість resize не застосовується до блоків, де для властивісті overflow встановлено visible. Враховуючи, що це значення без задання для цього ресурсу, вам потрібно переконатися, що для overflow встановлено значення відмінне від visible (наприклад, scroll чи auto).

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

resize: none|both|horizontal|vertical|initial|inherit;

Властивість resize може отримувати 6 значень:

none

Розміри елемента не змінюються.

автор: Svitlana

правити

both

Можна змінювати розміри елемента по горизонталі та вертикалі.

автор: Svitlana

правити

horizontal

Можна змінювати розміри елемента тільки по горизонталі.

автор: Svitlana

правити

vertical

Можна змінювати розміри елемента тільки по вертикалі.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання.

автор: Svitlana

правити

inherit

Успадкує значення від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
resize	4.0	5.0	4.0	12.10	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
resize	Не підтримується	37.0	Не підтримується

Приклади

+ запропонувати свій приклад у пісочниці

<div>Потягни за мій правий нижній кут.</div>

div {
    resize: both;
    overflow: auto;
    width: 220px;
    height: 90px;
    padding: 8px;
    border: 2px solid #0172ad;
}