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

правити

Переглядачі

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

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

Переглядач
	1	4	3	12.1	79	—

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

Переглядач
	4.4	18	4–79	—

Приклади

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

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

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

<div>
  Ти можеш змінити мій розмір! :)
</div>

body {
	font-size: 18px;
	font-family: sans-serif;
	color: #252525;
}

div { 
  width: 50%;
  text-align: center;
  padding: 30px;
  background: yellow;
  overflow: auto;
  resize: both;
}

<div class="box plain">resize: both, але overflow: visible — ручки немає</div>

<div class="box works">resize: both + overflow: auto — тягніть за куток</div>

<textarea>textarea: resize: vertical</textarea>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px;
}

.box {
    width: 240px;
    height: 80px;
    margin-bottom: 16px;
    padding: 8px;
    border: 2px solid #0172ad;
    background: #eef6ff;
    resize: both;
}

.plain {
    overflow: visible;
}

.works {
    overflow: auto;
}

textarea {
    width: 240px;
    height: 80px;
    padding: 8px;
    font: inherit;
    resize: vertical;
}

<p>Вибери потрібне значення для <code>resize</code>, а потім спробуй змінити розмір блоку (розтігуючи його, вхопившись курсором за правий знизу куток):</p>

<div class="inputs">
  <input id="none" checked name="resize" type="radio"/>
  <label for="none">none</label>
  <message for="none">Розміри елемента не змінюються.</message>
  
  <input id="both" name="resize" type="radio"/>
  <label for="both">both</label>
  <message for="both">Можна змінювати розміри елемента по горизонталі та вертикалі.</message>
  
  <input id="horizontal" name="resize" type="radio"/>
  <label for="horizontal">horizontal</label>
  <message for="horizontal">Можна змінювати розміри елемента тільки по горизонталі.</message>
  
  <input id="vertical" name="resize" type="radio"/>
  <label for="vertical">vertical</label>
  <message for="vertical">Можна змінювати розміри елемента тільки по вертикалі.</message>
</div>

<p id="message">Розміри елемента не змінюються.</p>

<hr>

<div id="block">
  <p>Це вміст блоку</p>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  font-size: 25px;
  text-align: left;
  background-color: yellow;
  padding: 16px;
  width: 250px;
  overflow: auto;
  resize: none;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('#block').forEach((n) => n.style.setProperty('resize', this.id));

}));