Propriété resize

La propriété resize interdit ou autorise la modification de la taille des textarea ou d'autres éléments (avec d'autres éléments, cela ne fonctionne pas dans tous les navigateurs).

Syntaxe

sélecteur {
	resize: both | horizontal | vertical | none;
}

Valeurs

Valeur	Description
`both`	Permet de redimensionner l'élément en largeur et en hauteur.
`horizontal`	Permet de redimensionner l'élément uniquement en largeur.
`vertical`	Permet de redimensionner l'élément uniquement en hauteur.
`none`	Il est impossible de redimensionner l'élément.

Valeur par défaut : none. Pour textarea dans certains navigateurs : both. Dans les navigateurs qui ne prennent pas en charge resize, textarea se comportera comme si la valeur none était définie.

Exemple . Valeur both

L'élément est redimensionnable dans les deux sens :

<textarea></textarea>

textarea {
	resize: both;
	width: 200px;
	height: 200px;
}

Exemple . Valeur horizontal

L'élément est redimensionnable uniquement horizontalement :

<textarea></textarea>

textarea {
	resize: horizontal;
	width: 200px;
	height: 200px;
}

Exemple . Valeur vertical

L'élément est redimensionnable uniquement verticalement :

<textarea></textarea>

textarea {
	resize: vertical;
	width: 200px;
	height: 200px;
}

Exemple . Valeur none

L'élément n'est pas redimensionnable du tout :

<textarea></textarea>

textarea {
	resize: none;
	width: 200px;
	height: 200px;
}

Exemple . Limitation de la largeur et de la hauteur

Il est possible de limiter la largeur et la hauteur minimales et maximales à l'aide des propriétés max-width, min-width, max-height, min-height :

<textarea></textarea>

textarea {
	resize: both;
	min-height: 100px;
	max-height: 300px;
	min-width: 100px;
	max-width: 300px;
}