Question Comment désactiver la propriété redimensionnable 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 de la textarea et en faisant glisser la souris. Comment puis-je désactiver cela?


2154
2018-03-08 16:15


origine


Réponses:


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) textareas, il y a un quelques options.

Pour désactiver un spécifique textarea avec le name attribut défini sur foo (c'est à dire., <textarea name="foo"></textarea>):

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

Ou, en utilisant un id attribut (c.-à-d. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

le Page W3C liste les valeurs possibles pour les restrictions de redimensionnement: aucune, horizontale, verticale et héritée:

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

Revoir un décent page de compatibilité pour voir quels navigateurs supportent actuellement cette fonctionnalité. Comme Jon Hulka a commenté, les dimensions peuvent être plus restreint en CSS en utilisant max-width, max-height, min-width et min-height.

Super important de savoir:

Cette propriété ne fait rien sauf si la propriété overflow est autre chose que visible, ce qui est la valeur par défaut pour la plupart des éléments. Donc généralement pour l'utiliser, vous devrez définir quelque chose comme overflow: scroll;

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


2861
2018-03-08 16:17



En CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



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 caractéristique de format est de débordement: auto se débarrasser de la barre de défilement de droite en tenant compte dir 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


91
2017-12-27 20:58



CSS3 a une nouvelle propriété pour les éléments de l'interface utilisateur qui vous permettra de le faire. La propriété est la redimensionner la propriété. Vous ajouteriez 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; utiliser un tableau de compatibilité pour voir la compatibilité du navigateur.

Personnellement, je trouverais très ennuyeux d'avoir le redimensionnement désactivé sur les éléments de textarea. C'est l'une de ces situations où le concepteur tente de «casser» le client de l'utilisateur. Si votre conception ne peut pas accepter une zone de texte plus grande, vous pouvez reconsidérer la façon dont votre conception fonctionne. Tout utilisateur peut ajouter textarea { resize: both !important; } à leur feuille de style utilisateur pour remplacer votre préférence.


57
2018-03-08 16:35



<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19



Si vous avez besoin d'un soutien profond, vous pouvez utiliser la technique de la vieille é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
2018-02-12 12:14



Cela peut être fait en HTML facile

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

Cela fonctionne pour moi. La valeur par défaut est true pour draggable attribut.


9
2017-07-21 05:18



Vous utilisez simplement: resize: none; dans votre CSS.

le redimensionner propriété spécifie si un élément est redimensionnable ou non   par l'utilisateur.

Remarque: La propriété redimensionner s'applique aux éléments dont le débordement calculé   la valeur est quelque chose d'autre que "visible".

Aussi redimensionner pas pris en charge dans IE pour le moment.

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

Pas de redimensionnement:

textarea { 
  resize: none; 
}

Redimensionner les deux manières (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, cela empêchera la redimensionnement de votre zone de texte, avec un support plus large des navigateurs.


4
2018-06-01 13:11



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

resize: none;
  • Vous pouvez l'appliquer comme une propriété de style en ligne comme ceci:

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

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43