Formaat wijzigen - CSS-trucs | CSS Almanac 2025

De resizeeigenschap bepaalt of en hoe de grootte van een element door de gebruiker kan worden gewijzigd door in de rechterbenedenhoek van het element te klikken en te slepen.

.module ( resize: both; )

Super belangrijk om te weten: resize doet niets tenzij de overfloweigenschap is ingesteld op iets anders dan visible, wat de beginwaarde is voor de meeste elementen.

Het is ook de moeite waard om te weten dat u met Firefox de grootte van een element kunt wijzigen dat kleiner is dan de oorspronkelijke grootte. Webkit-browsers laten je de grootte van een element niet wijzigen om het kleiner te maken, alleen groter (in beide dimensies).

Waarden

none: het element kan niet worden vergroot of verkleind. Dit is de beginwaarde voor de meeste elementen. Het textareaelement is de meest voorkomende uitzondering in veel browsers de standaard resizewaarde both.
both: de gebruiker kan de hoogte en / of breedte van het element wijzigen.
horizontal: de gebruiker kan het element horizontaal vergroten of verkleinen (de breedte vergroten).
vertical: de gebruiker kan de grootte van het element verticaal wijzigen (de hoogte vergroten).
inherit: het element erft de waarde voor het wijzigen van de grootte van het bovenliggende element.

Wanneer het formaat van een element kan worden aangepast, heeft het een kleine UI-handgreep in een benedenhoek. De handle verschijnt aan de rechterkant op pagina-elementen wanneer de pagina directionis ingesteld op ltr(van links naar rechts) en aan de linkerkant op rtl(van rechts naar links) pagina's.

Een element zonder het handvat (voorkant) en met het handvat (achterkant)

Demo

Het aanpasbare element in deze demo is een alinea. Klik op de knoppen om de verschillende resizewaarden uit te proberen .

Zie de Demo Pen Resize door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

overflow
direction

Meer informatie

De Spec
Mozilla Docs
David Walsh's artikel
Textarea-trucs

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.