Je veux désactiver la propriété de redimensionnement d'un textarea
.
Actuellement, je peux redimensionner un textarea
en cliquant sur le coin inférieur droit du textarea
et en faisant glisser la souris. Comment puis-je désactiver cette propriété ?
[!Entrez la description de l'image ici][1]][1]
La règle CSS suivante désactive le redimensionnement des éléments [textarea
][1] :
textarea {
resize: none;
}
Pour désactiver le redimensionnement de certains éléments textarea
s (mais pas tous), il existe [quelques options][2].
Pour désactiver un textarea
spécifique dont l'attribut name
est défini sur foo
(c'est-à-dire <textarea name="foo"></textarea>
) :
textarea[name=foo] {
resize: none;
}
Ou, en utilisant un attribut id
(c'est-à-dire, <textarea id="foo"></textarea>
) :
#foo {
resize: none;
}
La [page W3C][3] énumère les valeurs possibles pour les restrictions de redimensionnement : none, both, horizontal, vertical et inherit :
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Consultez une [page de compatibilité][4] décente pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme l'a fait remarquer Jon Hulka, les dimensions peuvent être [davantage restreintes][5] en CSS à l'aide de max-width, max-height, min-width et min-height.
Super important à savoir :
Cette propriété ne fait rien à moins que la propriété overflow ne soit autre que visible, ce qui est la valeur par défaut pour la plupart des éléments. Donc, en général, pour l'utiliser, vous devez définir quelque chose comme overflow : scroll ;
Citation de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
[1] : http://www.w3.org/wiki/HTML/Elements/textarea [2] : http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/ [3] : http://www.w3.org/TR/css3-ui/#resize [4] : http://quirksmode.org/css/user-interface/ [5] : http://davidwalsh.name/textarea-resize
CSS 3 a une nouvelle propriété pour les éléments d'interface utilisateur qui vous permettra de le faire. Cette propriété est la [propriété resize][1]. Vous pouvez donc ajouter le texte suivant à votre feuille de style pour désactiver le redimensionnement de tous les éléments de la zone de texte :
textarea { resize: none; }
Il s'agit d'une propriété CSS 3 ; utilisez un [tableau de compatibilité][2] pour vérifier la compatibilité avec les navigateurs.
Personnellement, je trouverais très gênant que le redimensionnement soit désactivé pour les éléments de type textarea. Il s'agit d'une de ces situations où le concepteur essaie de "casser" le client de l'utilisateur. Si votre conception ne peut pas s'adapter à une zone de texte plus grande, vous devriez peut-être reconsidérer la façon dont votre conception fonctionne. Tout utilisateur peut ajouter textarea { resize : both !important ; }
à sa feuille de style utilisateur pour passer outre votre préférence.
[1] : http://www.w3.org/TR/css3-ui/#resize [2] : http://quirksmode.org/css/contents.html