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

/* 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
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
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.

Syntaxe formelle

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 :

textarea.exemple {
  resize: none;
}

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

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

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

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

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

Spécification Statut Commentaires
CSS Logical Properties and Values Level 1
La définition de 'resize' dans cette spécification.
Brouillon de l'éditeur Ajout des valeurs block et inline.
CSS Basic User Interface Module Level 3
La définition de 'resize' dans cette spécification.
Recommendation Définition initiale.

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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Aucun support NonFirefox Support complet Oui
Support complet Oui
Aucun support 4 — ?
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet 12.1Safari Support complet 3WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support on block level, replaced, table cell, or inline block elementsChrome Support complet 4Edge Aucun support NonFirefox Support complet 5
Notes
Support complet 5
Notes
Notes resize doesn't have any effect on <iframe>. See bug 680823)
IE Aucun support NonOpera Support complet 15Safari Support complet 4WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for flow-relative values block and inlineChrome Aucun support NonEdge Aucun support NonFirefox Support complet 63IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,