Egenskapen resize

Egenskapen resize förbjuder eller tillåter ändring av storlek på textarea eller andra element (med andra element fungerar det inte i alla webbläsare).

Syntax

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

Värden

Värde Beskrivning
both Elementet kan sträckas ut i bredd och höjd.
horizontal Elementet kan endast sträckas ut i bredd.
vertical Elementet kan endast sträckas ut i höjd.
none Det går inte att ändra elementets storlek.

Standardvärde: none. För textarea i vissa webbläsare: both. I de webbläsare som inte stöder resize kommer textarea att bete sig som om värdet none är satt.

Exempel . Värdet both

Elementet sträcks ut i båda riktningar:

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

Результат:

Exempel . Värdet horizontal

Elementet sträcks ut endast horisontellt:

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

Результат:

Exempel . Värdet vertical

Elementet sträcks ut endast vertikalt:

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

Результат:

Exempel . Värdet none

Elementet sträcks inte ut alls:

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

Результат:

Exempel . Begränsning av bredd och höjd

Du kan begränsa minimi- och maximibredd och höjd med egenskaperna 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;
}

Результат: