Propriété resize

La propriété resize interdit ou autorise la modification de la taille des textarea ou d'autres éléments (avec d'autres éléments, cela ne fonctionne pas dans tous les navigateurs).

Syntaxe

csssélecteur {
  resize: both | horizontal | vertical | none;
}

Valeurs

Valeur par défaut : none. Pour textarea dans certains navigateurs : both. Dans les navigateurs qui ne prennent pas en charge resize, textarea se comportera comme si la valeur none était définie.

Exemple . Valeur both

L'élément est redimensionnable dans les deux sens :

html<textarea></textarea>

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

Результат:

Exemple . Valeur horizontal

L'élément est redimensionnable uniquement horizontalement :

html<textarea></textarea>

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

Результат:

Exemple . Valeur vertical

L'élément est redimensionnable uniquement verticalement :

html<textarea></textarea>

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

Результат:

Exemple . Valeur none

L'élément n'est pas redimensionnable du tout :

html<textarea></textarea>

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

Результат:

Exemple . Limitation de la largeur et de la hauteur

Il est possible de limiter la largeur et la hauteur minimales et maximales à l'aide des propriétés 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;
}

Результат: