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é.

Exemple interactif

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 initialenone
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éenon
Valeur calculéecomme spécifié
Type d'animationdiscrè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