Resize-ominaisuus

Ominaisuus resize kieltää tai sallii textarea-elementin koon muuttamisen (muiden elementtien kanssa se ei toimi kaikissa selaimissa).

Syntaksi

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

Arvot

Arvo	Kuvaus
`both`	Elementtiä voi venyttää leveys- ja korkeussuunnassa.
`horizontal`	Elementtiä voi venyttää vain leveyssuunnassa.
`vertical`	Elementtiä voi venyttää vain korkeussuunnassa.
`none`	Elementin kokoa ei voi muuttaa.

Oletusarvo: none. textarea-elementille joissakin selaimissa: both. Sellaisissa selaimissa, joissa resize-ominaisuutta ei tueta, textarea käyttäytyy kuin sille olisi asetettu arvo none.

Esimerkki . Arvo both

Elementtiä venytetään molempiin suuntiin:

html<textarea></textarea>

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

Результат:

Esimerkki . Arvo horizontal

Elementtiä venytetään vain vaakasuunnassa:

html<textarea></textarea>

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

Результат:

Esimerkki . Arvo vertical

Elementtiä venytetään vain pystysuunnassa:

html<textarea></textarea>

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

Результат:

Esimerkki . Arvo none

Elementtiä ei venytetä ollenkaan:

html<textarea></textarea>

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

Результат:

Esimerkki . Leveyden ja korkeuden rajoitus

Minimi- ja maksimileveyttä ja -korkeutta voidaan rajoittaa ominaisuuksilla 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;
}

Результат: