Proprietà resize

La proprietà resize vieta o consente la modifica delle dimensioni di textarea o di altri elementi (con altri elementi non funziona in tutti i browser).

Sintassi

selettore {
	resize: both | horizontal | vertical | none;
}

Valori

Valore	Descrizione
`both`	Permette di ridimensionare l'elemento in larghezza e altezza.
`horizontal`	Permette di ridimensionare l'elemento solo in larghezza.
`vertical`	Permette di ridimensionare l'elemento solo in altezza.
`none`	Non è possibile modificare le dimensioni dell'elemento.

Valore predefinito: none. Per textarea in alcuni browser: both. Nei browser che non supportano resize, textarea si comporterà come se fosse impostato il valore none.

Esempio . Valore both

L'elemento si ridimensiona in entrambe le direzioni:

<textarea></textarea>

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

Esempio . Valore horizontal

L'elemento si ridimensiona solo orizzontalmente:

<textarea></textarea>

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

Esempio . Valore vertical

L'elemento si ridimensiona solo verticalmente:

<textarea></textarea>

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

Esempio . Valore none

L'elemento non si ridimensiona affatto:

<textarea></textarea>

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

Esempio . Limitazione larghezza e altezza

È possibile limitare la larghezza e l'altezza minima e massima utilizzando le proprietà 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;
}