Je veux désactiver la propriété redimensionnable d’une zone de textarea
.
Actuellement, je peux redimensionner une zone de textarea
en cliquant sur le coin inférieur droit de la zone de textarea
et en faisant glisser la souris. Comment puis-je le désactiver?
La règle CSS suivante désactive le comportement de redimensionnement pour les éléments textarea
:
textarea { resize: none; }
Pour le désactiver pour certaines (mais pas toutes) les textarea
, il y a quelques options .
Pour désactiver une zone de textarea
spécifique avec l’atsortingbut name
défini sur foo
(par exemple, ):
textarea[name=foo] { resize: none; }
Ou, en utilisant un atsortingbut id
(par exemple, ):
#foo { resize: none; }
La page W3C répertorie les valeurs possibles pour le redimensionnement des ressortingctions: none, two, horizontal, vertical et inherit:
textarea { resize: vertical; /* user can resize vertically, but width is fixed */ }
Consultez une page de compatibilité correcte pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme Jon Hulka l’a commenté, les dimensions peuvent être restreintes en CSS en utilisant max-width, max-height, min-width et min-height.
Super important de savoir:
Cette propriété ne fait rien à moins que la propriété overflow soit autre chose que visible, ce qui est la valeur par défaut pour la plupart des éléments. Donc, généralement pour utiliser ceci, vous devrez définir quelque chose comme un débordement: scroll;
Citation de Chris Coyier, http://css-sortingcks.com/almanac/properties/r/resize/
En CSS …
textarea { resize: none; }
J’ai trouvé 2 choses
premier
textarea{resize:none}
c’est un css3 qui n’est pas encore sorti compatible avec Firefox4 + chrome et safari
une autre fonctionnalité de formatage est de déborder: auto pour se débarrasser de la barre de défilement droite en tenant compte de l’atsortingbut dir
HTML de base
Certains navigateurs
CSS3 a une nouvelle propriété pour les éléments d’interface utilisateur qui vous permettra de le faire. La propriété est la propriété de redimensionnement . Vous appendez donc ce qui suit à votre feuille de style pour désactiver le redimensionnement de tous les éléments textarea:
textarea { resize: none; }
Ceci est une propriété CSS3; Utilisez un tableau de compatibilité pour voir la compatibilité du navigateur.
Personnellement, je trouverais très gênant que le redimensionnement soit désactivé sur les éléments textarea. C’est l’une des situations où le concepteur tente de “casser” le client de l’utilisateur. Si votre conception ne peut pas accueillir une zone de texte plus grande, vous voudrez peut-être reconsidérer le fonctionnement de votre conception. Tout utilisateur peut append du textarea { resize: both !important; }
textarea { resize: both !important; }
à leur feuille de style utilisateur pour remplacer votre préférence.
Si vous avez besoin d’un soutien profond, vous pouvez utiliser la technique old school
textarea { max-width:/*desired fixed width*/ px; min-width:/*desired fixed width*/ px; min-height:/*desired fixed height*/ px; max-height:/*desired fixed height*/ px; }
Cela peut être fait en HTML facile
Cela fonctionne pour moi. La valeur par défaut est true
pour l’atsortingbut draggable
.
Vous utilisez simplement: resize: none;
dans votre CSS.
La propriété resize spécifie si un élément peut être redimensionné par l’utilisateur.
Remarque: La propriété resize s’applique aux éléments dont la valeur de débordement calculée est autre chose que “visible”.
Redimensionnez également non pris en charge dans IE pour le moment.
Voici différentes propriétés pour le redimensionnement:
Pas de redimensionnement:
textarea { resize: none; }
Redimensionnez les deux sens (verticalement et horizontalement):
textarea { resize: both; }
Redimensionner verticalement:
textarea { resize: vertical; }
Redimensionner horizontalement:
textarea { resize: horizontal; }
De plus, si vous avez de la width
et de la height
dans votre CSS ou HTML, cela empêchera de redimensionner votre texte, avec un support de navigateur plus large.
Pour désactiver la propriété de redimensionnement, utilisez la propriété CSS suivante:
resize: none;
Vous pouvez soit l’appliquer comme une propriété de style en ligne, comme ceci:
ou entre les balises d’élément
comme suit:
textarea { resize: none; }
CSS3 peut résoudre ce problème. Malheureusement, il n’est supporté que sur 60% des navigateurs utilisés de nos jours.
Pour IE et iOS, vous ne pouvez pas désactiver le redimensionnement, mais vous pouvez limiter la dimension textarea
en définissant sa width
et sa height
.
/* One can also turn on/off specific axis. Defaults to both on. */ textarea { resize:vertical; } /* none|horizontal|vertical|both */
Voir la démo
essaye ça:
#foo { resize: none; }
L’ajout! Important le fait fonctionner:
width:325px !important; height:120px !important; outline:none !important;
contour est juste pour éviter le contour bleu sur certains navigateurs
Pour désactiver le redimensionnement pour toutes les zones de texte
textarea { resize: none; }
Pour désactiver le redimensionnement d’une zone de textarea
spécifique Ajoutez un name
atsortingbut ou un id
et définissez-le sur quelque chose. Dans ce cas, il est nommé noresize
CSS
/* using the atsortingbute name */ textarea[name=noresize]{ resize: none; } /* or using the id */ #noresize{ resize: none; }
Vous pouvez simplement désactiver la propriété textarea comme ceci:
textarea{ resize: none; }
Pour désactiver le redimensionnement vertical ou horizontal , utilisez
resize: vertical;
ou
resize: horizontal;
Avec @style
, vous pouvez lui atsortingbuer une taille personnalisée et désactiver la fonctionnalité de (resize: none;)
.
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Vous pouvez essayer avec jQuery aussi
$('textarea').css("resize", "none");