Змінити розмір - CSS-хитрощі

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

.module ( resize: both; )

Надзвичайно важливо знати: resize нічого не робить, якщо для overflowвластивості не встановлено щось інше, ніж visibleце початкове значення для більшості елементів.

Також варто знати, що Firefox дозволить вам змінити розмір елемента, меншого за початковий розмір. Веб-переглядачі Webkit не дозволяють змінювати розмір елемента, щоб зробити його меншим, лише більшим (в обох вимірах).

Цінності

none: елемент не може змінити розмір. Це початкове значення для більшості елементів. textareaЕлемент є найбільш поширеними винятками в багатьох браузерах його по замовчуванням resizeзначення both.
both: користувач може змінити розмір елемента по висоті та / або ширині.
horizontal: користувач може змінювати розмір елемента по горизонталі (збільшуючи ширину).
vertical: користувач може змінювати розмір елемента вертикально (збільшуючи висоту).
inherit: елемент успадковує значення розміру свого батька.

Коли розмір елемента можна змінити, він має невеликий маркер інтерфейсу користувача в нижньому куті. Дескриптор відображається праворуч на елементах сторінки, коли для сторінок directionвстановлено значення ltr(зліва направо), а зліва на сторінках rtl(справа наліво).

Елемент без ручки (спереду) та з ручкою (ззаду)

Демо

Елементом, який можна змінити в цій демонстрації, є абзац. Клацніть на кнопки, щоб спробувати різні resizeзначення.

Див. Демонстрацію розміру пера від CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

overflow
direction

Більше інформації

Специфікація
Mozilla Docs
Стаття Девіда Уолша
Фокуси Textarea

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.