Właściwość resize

Właściwość resize zabrania lub zezwala na zmianę rozmiarów textarea lub innych elementów (z innymi elementami działa nie we wszystkich przeglądarkach).

Składnia

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

Wartości

Wartość Opis
both Można rozciągać element po szerokości i wysokości.
horizontal Można rozciągać element tylko po szerokości.
vertical Można rozciągać element tylko po wysokości.
none Zmiana rozmiarów elementu jest niemożliwa.

Wartość domyślna: none. Dla textarea w niektórych przeglądarkach: both. W tych przeglądarkach, gdzie nie ma wsparcia dla resize, textarea będzie zachowywać się tak, jakby była ustawiona wartość none.

Przykład . Wartość both

Element rozciąga się w obie strony:

html<textarea></textarea>
csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

Przykład . Wartość horizontal

Element rozciąga się tylko poziomo:

html<textarea></textarea>
csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

Przykład . Wartość vertical

Element rozciąga się tylko pionowo:

html<textarea></textarea>
csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

Przykład . Wartość none

Element w ogóle się nie rozciąga:

html<textarea></textarea>
csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

Przykład . Ograniczenie szerokości i wysokości

Można ograniczyć minimalną i maksymalną szerokość i wysokość za pomocą właściwości 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;
}

Результат: