Je veux désactiver la propriété redimensionnable d'un textarea.
Actuellement, je peux redimensionner une textarea en cliquant sur le coin en bas à droite de l' textarea et en faisant glisser la souris. Comment puis-je désactiver cette option?
Réponses
Trop de publicités?
La règle CSS suivante désactive le redimensionnement de comportement pour l' textarea éléments:
textarea {
resize: none;
}
Pour la désactiver pour certains (mais pas tous) textareas, il ya un couple d'options.
Pour désactiver un spécifique textarea avec l' name attribut foo (c'est à dire, <textarea name="foo"></textarea>):
textarea[name=foo] {
resize: none;
}
Ou, à l'aide d'un id d'attribut (c'est à dire, <textarea id="foo"></textarea>):
#foo {
resize: none;
}
Le W3C page des listes de valeurs possibles pour le redimensionnement des restrictions: aucune, tous les deux, à l'horizontale, à la verticale, et d'hériter. Examen décent page de compatibilité pour voir quels sont les navigateurs actuellement en charge cette fonctionnalité. Comme Jon Hulka a commenté, les dimensions peuvent être plus sobre en CSS à l'aide de max-width, max-height, min-width et min-height.
Super important à savoir:
Cette propriété n'est rien de moins que la propriété de dépassement est autre chose que le visible, qui est la valeur par défaut pour la plupart des éléments. Donc généralement utiliser cette fonction, vous devez régler quelque chose comme overflow: scroll;
Citation de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
Jeff Parker
Points
4615
Rami Jamleh
Points
517
J'ai trouvé 2 choses
première
textarea{resize:none}
c'est un css3 qui n'est pas encore sorti compatibles avec Firefox4+ chrome et safari
un autre format fonction overflow:auto pour se débarrasser de la barre de défilement à droite tenant compte dir attribut
code et de différents navigateurs
Html de base
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Certains navigateurs
- IE8
- FF 17.0.1
- chrome
jsumners
Points
6247
CSS3 a une nouvelle propery pour les éléments d'INTERFACE utilisateur qui vous permettra de le faire. La propriété est le redimensionnement de la propriété. Si vous ajoutez ce qui suit à votre feuille de style pour désactiver le redimensionnement de toutes les textarea éléments:
textarea { resize: none; }
C'est une propriété CSS3; utiliser un tableau de compatibilité pour voir la compatibilité du navigateur.
Personnellement, je trouve ça très ennuyeux d'avoir le redimensionnement désactivé sur textarea éléments. C'est l'une de ces situations où le concepteur est d'essayer de "casser" le client de l'utilisateur. Si votre conception ne peut pas accueillir un plus grand textarea, vous pourriez vouloir reconsidérer la façon dont vos travaux de conception. N'importe quel utilisateur peut ajouter textarea { resize: both !important; } de leur utilisateur de la feuille de style pour remplacer votre préférence.
Imtiaz Ali Baigal
Points
31
