resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
resize
block
Support on block level, replaced, table cell, or inline block elements
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Voir aussi