web-dev-qa-db-fra.com

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

Je veux désactiver la propriété redimensionnable d'un textarea.

Actuellement, je peux redimensionner une textarea en cliquant sur le coin inférieur droit de la textarea et en faisant glisser la souris. Comment puis-je désactiver ceci?

enter image description here

htmlcss
2452
user549757

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

textarea {
  resize: none;
}

Pour le désactiver pour certains (mais pas tous) textareas, il existe un deux options .

Pour désactiver un textarea avec l’attribut name défini sur foo (c.-à-d., <textarea name="foo"></textarea>):

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

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

#foo {
  resize: none;
}

La page du W3C répertorie les valeurs possibles pour les restrictions de redimensionnement: aucune, les deux, horizontale, verticale et héritée:

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

Examinez un bon page de compatibilité pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme Jon Hulka l'a commenté, les dimensions peuvent être davantage restreintes 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é de débordement est autre chose que visible, qui est la valeur par défaut pour la plupart des éléments. Donc généralement, pour utiliser cela, vous devrez définir quelque chose comme overflow: scroll;

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

3269
Donut

En CSS ...

textarea {
    resize: none;
}
195
Jeff Parker

J'ai trouvé 2 choses

première

textarea{resize:none}

css3 qui n’est pas encore sorti compatible avec Firefox4 + chrome et safari

une autre fonctionnalité de formatage consiste à débordement: auto à supprimer la barre de défilement 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>

Quelques navigateurs

  • IE8

enter image description here

  • 17.0.1 FF

enter image description here

  • chrome

enter image description here

100
Rami Jamleh

CSS3 a une nouvelle propriété pour les éléments d'interface utilisateur qui vous permettra de le faire. La propriété est le propriété de redimensionnement . Vous ajouterez donc les éléments suivants à 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 trouve très ennuyeux de désactiver le redimensionnement sur des éléments 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 accueillir une zone de texte plus grande, vous voudrez peut-être revoir son fonctionnement. Tout utilisateur peut ajouter textarea { resize: both !important; } à sa feuille de style pour annuler vos préférences.

62
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
22
Imtiaz Ali Baigal

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

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 l'attribut draggable.

12
Thusitha Wickramasinghe

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

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

Remarque: La propriété resize s'applique aux éléments dont la valeur de dépassement calculée est 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 sens (verticalement et horizontalement):

textarea { 
  resize: both; 
}

Redimensionner verticalement:

textarea { 
  resize: vertical; 
}

Redimensionner horizontalement:

textarea { 
  resize: horizontal; 
}

De même, si vous avez width et height dans votre code CSS ou HTML, vous évitez que votre zone de texte ne soit redimensionnée, avec une prise en charge plus étendue des navigateurs.

6
Alireza

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

resize: none;

  • Vous pouvez soit appliquer cela comme une propriété de style en ligne comme ceci:

    <textarea style="resize: none;"></textarea>

  • ou entre <style>...</style> balises d'élément comme ceci:

    textarea {
    resize: none;
}
5
Webeng

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 ses paramètres 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

3
Oriol

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

textarea{
    resize: none;
}

Pour désactiver le redimensionnement de vertical ou horizontal, utilisez

resize: vertical;

ou

resize: horizontal;
3
user7122338

Avec @style, vous pouvez lui attribuer 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;" })
1
Carlos de Jesus Baez

essaye ça:

#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
Rafiqul Islam

Utilisez la propriété resize css.

textarea {
 resize:none;
}

Cela désactivera la propriété redimensionnable de tout textarea.

Pour désactiver l'utilisation spécifique de textarea ci-dessous

Pour désactiver la propriété redimensionnable d'un textarea avec l'id textarea1, utilisez ce code

#textarea1 {
 resize:none;
}

Pour désactiver la propriété redimensionnable d'un textarea portant le nom textareaname1, utilisez ce code

textarea[name="textareaname1"] {
 resize:none;
}
0
Gokul Raj K.N.

J'ai créé une petite démo pour montrer comment fonctionnent les propriétés de redimensionnement. J'espère que cela vous aidera et aidera également les autres.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
0
Ambuj Khanna

Pour désactiver le redimensionnement pour tous les espaces de texte

textarea {
    resize: none;
}

Pour désactiver le redimensionnement pour un textarea spécifique, ajoutez un attribut name ou un id et définissez-le sur quelque chose. Dans ce cas, il s'appelle 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
Abk

Vous pouvez aussi essayer avec jQuery

$('textarea').css("resize", "none");
0
Santosh Khalse

Ajouter! Important le fait fonctionner:

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

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

0
kaelds