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

je veux désactiver la propriété redimensionnable 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 je peux désactiver ça?

2207
demandé sur Cthulhu 2011-03-08 19:15:40
la source

16 ответов

la règle CSS suivante désactive le comportement de redimensionnement pour textarea éléments:

textarea {
  resize: none;
}

pour le désactiver pour certains (mais pas tous) textarea s, il ya un couple d'options .

pour désactiver un attribut spécifique textarea avec l'attribut name défini à foo (i.e., <textarea name="foo"></textarea> ):

textarea[name=foo] {
  resize: none;
}

ou, en utilisant un id attribut (c'est à dire, <textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

Le W3C page listes de valeurs possibles pour le redimensionnement des restrictions: aucune, tous les deux, à l'horizontale, à la verticale, et d'hériter:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

examiner un bon page de compatibilité pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme Jon Hulka a commenté, les dimensions peuvent être plus restreint dans CSS en utilisant Max-largeur, hauteur maximale, Largeur minimale et hauteur minimale.

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 généralement pour utiliser ceci, vous devrez définir quelque chose comme overflow: scroll;

citation de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize /

2936
répondu Donut 2018-06-20 14:54:08
la source

dans CSS ...

textarea {
    resize: none;
}
176
répondu Jeff Parker 2011-03-08 19:17:54
la source

j'ai trouvé 2 choses

première

textarea{resize:none}

c'est un css3 qui n'est pas encore sorti compatible avec Firefox4+ chrome et safari

une autre caractéristique de format est de débordement automatique pour se débarrasser de la droite scrollbar en tenant compte dir " 15198090920" attribut

code et 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

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

93
répondu Rami Jamleh 2012-12-28 00:58:33
la source

CSS3 a une nouvelle propriété pour les éléments UI qui vous permettra de faire ceci. La propriété est la resize propriété . Ainsi, vous ajouteriez ce qui suit à votre feuille de style pour désactiver le redimensionnement de tous les éléments textarea:

textarea { resize: none; }

il s'agit d'une propriété CSS3; utilisez un tableau de compatibilité pour voir la compatibilité du navigateur.

personnellement, je trouverais 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 design ne peut pas accommoder un textarea plus grand, vous pourriez vouloir reconsidérer la façon dont votre design fonctionne. N'importe quel utilisateur peut ajouter textarea { resize: both !important; } à leur feuille de style utilisateur pour outrepasser votre préférence.

57
répondu James Sumners 2014-01-02 17:45:55
la source
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
19
répondu Imtiaz Ali Baigal 2013-11-06 13:19:04
la source

si vous avez besoin d'un soutien profond, vous pouvez utiliser la technique de l'ancienne école

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;
}
18
répondu yevgeniy 2015-02-12 15:14:27
la source

cela peut être fait en html facile

<textarea name="textinput" draggable="false"></textarea>

ça me va. La valeur par défaut est true pour l'attribut draggable .

9
répondu Thusitha Wickramasinghe 2015-07-22 06:43:06
la source

il vous suffit d'utiliser: resize: none; dans votre CSS.

la propriété redimensionner précise si un élément est redimensionnable ou non par l'utilisateur.

Note: la propriété resize s'applique aux éléments dont le dépassement calculé la valeur est autre chose que le "visible".

aussi redimensionner non pris en charge dans IE au moment.

Voici différentes propriétés pour redimensionner:

Pas De Redimensionnement:

textarea { 
  resize: none; 
}

redimensionner dans les deux sens (verticalement et horizontalement):

textarea { 
  resize: both; 
}

redimensionner verticalement:

textarea { 
  resize: vertical; 
}

redimensionner horizontalement:

textarea { 
  resize: horizontal; 
}

aussi si vous avez width et height dans votre CSS ou HTML, il empêchera votre textarea être redimensionné, avec un navigateur plus large prise en charge.

4
répondu Alireza 2017-06-03 21:15:53
la source

pour désactiver la propriété redimensionner, utilisez la propriété CSS suivante:

resize: none;
  • vous pouvez soit appliquer ceci comme une propriété de style inline comme so:

    <textarea style="resize: none;"></textarea>
    
  • ou entre <style>...</style> balises d'élément comme suit:

    textarea {
        resize: none;
    }
    
4
répondu Webeng 2018-05-10 16:19:46
la source

CSS3 peut résoudre ce problème. Malheureusement, il est seulement pris en charge 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 paramétrant ses width et height .

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Voir Démo

2
répondu Oriol 2015-11-01 23:58:45
la source

essayez ceci:

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
1
répondu Rafiqul Islam 2018-07-05 12:59:53
la source

ajouter !important le fait fonctionner:

width:325px !important; height:120px !important; outline:none !important;

contour est juste pour éviter le contour bleu sur certains navigateur

0
répondu kaelds 2014-02-03 23:07:36
la source

Pour désactiver le redimensionnement pour tous les textarea

textarea {
    resize: none;
}

Pour désactiver le redimensionnement pour un textarea Ajouter un attribut name ou un id et le mettre à quelque chose. Dans ce cas, il est appelé noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}
0
répondu Abk 2016-10-25 11:19:12
la source

, Vous pouvez simplement désactiver textarea de la propriété comme ceci:

textarea{
    resize: none;
}

pour désactiver vertical ou horizontal redimensionnement, utilisation

resize: vertical;

ou

resize: horizontal;
0
répondu Ashraful 2018-05-28 10:09:56
la source

avec @style , vous pouvez lui donner une taille personnalisée et désactiver la fonction de redimensionnement (resize: none;) .

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
0
répondu Carlos de Jesus Baez 2018-08-30 22:21:48
la source

vous pouvez essayer avec jQuery aussi

$('textarea').css("resize", "none");
-1
répondu Santosh Khalse 2016-12-15 11:15:16
la source

Autres questions sur html css