Преоразмеряване - 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, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.