Comment désactiver la propriété redimensionnable de textarea?

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

code et différents navigateurs

HTML de base

 < !DOCTYPE html>        

Certains navigateurs

• IE8

• FF 17.0.1

• chrome

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; } 

  Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd  

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");