resize

La propriété resize permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.

Syntaxe

css

/* Valeurs avec un mot-clé */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Valeurs globales */
resize: inherit;
resize: initial;
resize: unset;

La propriété resize peut être définie avec l'un des mots-clés suivants.

Valeurs

none: L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.
both: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.
horizontal: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).
vertical: L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).
block Expérimental: Selon les valeurs de writing-mode et direction, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.
inline Expérimental: Selon les valeurs de writing-mode et direction, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.

Note : resize ne s'applique pas aux blocs dont la propriété overflow vaut visible.

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments dont `overflow` ne vaut pas `visible` et éventuellement les éléments remplacés qui représentent des images, des vidéos ou des iframes
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline

Exemples

Désactiver le redimensionnement des éléments `textarea`

CSS

Par défaut, les éléments <textarea> peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :

css

textarea.exemple {
  resize: none;
}

HTML

html

<textarea class="exemple">Saisir du texte ici.</textarea>

Résultat

Utiliser `resize` sur des éléments quelconques

La propriété resize peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte <div> redimensionnable qui contient un paragraphe ((<p>) lui-même redimensionnable) :

CSS

css

.redimensionnable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

html

<div class="redimensionnable">
  <p class="redimensionnable">
    Ce paragraphe peut être redimensionné car la propriété
    CSS resize vaut 'both' sur cet élément.
  </p>
</div>

Résultat

Spécifications

Specification
CSS Basic User Interface Module Level 4 # resize

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

<textarea>