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

cssselettore {
  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:

html<textarea></textarea>

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

Результат:

Esempio . Valore horizontal

L'elemento si ridimensiona solo orizzontalmente:

html<textarea></textarea>

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

Результат:

Esempio . Valore vertical

L'elemento si ridimensiona solo verticalmente:

html<textarea></textarea>

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

Результат:

Esempio . Valore none

L'elemento non si ridimensiona affatto:

html<textarea></textarea>

csstextarea {
  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:

html<textarea></textarea>

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

Результат: