Изменить размер - 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
Статья Дэвида Уолша
Уловки Textarea

Поддержка браузера

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