Ändra storlek - CSS-tricks | CSS Almanack 2025

De resizestyr fastighets om och hur ett element kan ändra storlek av användaren genom att klicka och dra det nedre högra hörnet av elementet.

.module ( resize: both; )

Super viktigt att veta: resize gör ingenting om inte overflowegenskapen är inställd på något annat än visible, vilket är dess ursprungliga värde för de flesta element.

Det är också värt att veta att Firefox låter dig ändra storlek på ett element som är mindre än dess ursprungliga storlek. Webkit-webbläsare låter dig inte ändra storlek på ett element så att det blir mindre, bara större (i båda dimensionerna).

Värden

none: elementet går inte att ändra storlek på. Detta är det initiala värdet för de flesta element. Den textareadel är den vanligaste undantags i många webbläsare resizestandardvärdet är both.
both: användaren kan ändra storlek på elementets höjd och / eller bredd.
horizontal: användaren kan ändra storlek på elementet horisontellt (öka bredden).
vertical: användaren kan ändra storlek på elementet vertikalt (höja höjden).
inherit: elementet ärver storleksvärdet för dess överordnade.

När det går att ändra storlek på ett element har det ett litet UI-handtag i ett nedre hörn. Handtaget visas till höger på sidelement när sidan directionär inställd på ltr(från vänster till höger) och till vänster på rtl(höger till vänster) sidor.

Ett element utan handtaget (fram) och med handtaget (bak)

Demo

Det storleksbestämda elementet i denna demo är ett stycke. Klicka på knapparna för att testa de olika resizevärdena.

Se Pen Resize Demo av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

overflow
direction

Mer information

Specifikationen
Mozilla Docs
David Walshs artikel
Textarea Tricks

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.