Eigenschap resize

De eigenschap resize verbiedt of staat het wijzigen van de afmetingen van textarea of andere elementen toe (werkt niet in alle browsers met andere elementen).

Syntaxis

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

Waarden

Waarde	Beschrijving
`both`	Het element kan in breedte en hoogte worden uitgerekt.
`horizontal`	Het element kan alleen in breedte worden uitgerekt.
`vertical`	Het element kan alleen in hoogte worden uitgerekt.
`none`	Het is niet mogelijk de afmetingen van het element te wijzigen.

Standaardwaarde: none. Voor textarea in sommige browsers: both. In browsers die resize niet ondersteunen, zal textarea zich gedragen alsof de waarde none is ingesteld.

Voorbeeld . Waarde both

Element rekt in beide richtingen uit:

html<textarea></textarea>

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

Результат:

Voorbeeld . Waarde horizontal

Element rekt alleen horizontaal uit:

html<textarea></textarea>

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

Результат:

Voorbeeld . Waarde vertical

Element rekt alleen verticaal uit:

html<textarea></textarea>

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

Результат:

Voorbeeld . Waarde none

Element rekt helemaal niet uit:

html<textarea></textarea>

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

Результат:

Voorbeeld . Beperking van breedte en hoogte

Minimale en maximale breedte en hoogte kunnen worden beperkt met de eigenschappen 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;
}

Результат: