Comment désactiver la propriété redimensionnable d'une zone de texte?

2650

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

Actuellement, je peux redimensionner un textareaen cliquant sur le coin inférieur droit de textareaet en faisant glisser la souris. Comment puis-je désactiver cela?

Entrez la description de l'image ici

html  css 
— user549757
source
4
@JDIsaaks - en outre, autoriser le redimensionnement dans certaines situations peut casser la mise en page et l'imprimabilité (un aspect important d'un projet critique actuel).
— random_user_name
10
Parfois, vous voulez vraiment une zone de texte non redimensionnable. Par exemple, dans ce cas, lorsque vous convertissez (conditionnellement) une zone de texte en quelque chose qui ressemble à une étiquette. Il semble vraiment étrange d'avoir une étiquette avec un grappin flottant aléatoire sur le côté.
— neminem
2
Pour l'amour de tout ce qui est bon, veuillez ne pas le faire sur une zone de texte réelle ou vous aliénerez vos utilisateurs avancés. Briser la fonctionnalité principale du navigateur devrait être considéré comme une option nucléaire.
— superluminaire le

Réponses:

3532

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

textarea {
  resize: none;
}

Pour le désactiver pour certains (mais pas tous) textarea, il existe quelques options .

Pour désactiver un spécifique textareaavec l' nameattribut défini sur foo(c'est- à -dire <textarea name="foo"></textarea>):

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

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

#foo {
  resize: none;
}

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

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

Consultez une page de compatibilité décente pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme Jon Hulka l'a commenté, les dimensions peuvent être encore plus restreintes en CSS en utilisant max-width, max-height, min-width et min-height.

Super important à 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 utiliser cela, vous devrez définir quelque chose comme débordement: défilement;

Citation de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Donut
source
Existe-t-il une solution pour Firefox, Opera et / ou IE?
— Šime Vidas
6
@ Šime IE et FF3 (et versions antérieures) n'ajoutent pas de redimensionnement de prise en charge, donc aucune solution n'est nécessaire pour eux. Pour FF4, cette solution devrait fonctionner.
— Donut
24
selon davidwalsh.name/textarea-resize - utilisez resize: vertical ou resize: horizontal pour contraindre le redimensionnement à une dimension. Ou utilisez n'importe quelle largeur max, hauteur max, largeur min et hauteur min.
— Jon Hulka
3
Suis-je le seul à trouver bizarre de définir cela en utilisant CSS et non des attributs? Pourquoi ne puis-je pas définir les propriétés désactivées ou vérifiées ou d'autres propriétés en utilisant CSS ...
— Buksy
6
@Buksy Parce que "désactivé" est un état, pas une propriété visuelle. Il est donc logique que cela ne soit pas décidé par un langage de style .
— Kroltan
105

J'ai trouvé deux choses:

Première

textarea{resize: none}

Il s'agit d'un CSS 3, qui n'est pas encore publié , compatible avec Firefox 4 (et versions ultérieures), Chrome et Safari .

Une autre fonctionnalité de formatage consiste à overflow: autose débarrasser de la barre de défilement droite, en tenant compte de l' attribut dir .

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

  • Internet Explorer 8

Entrez la description de l'image ici

  • Firefox 17.0.1

Entrez la description de l'image ici

  • Chrome

Entrez la description de l'image ici

— Rami Jamleh
source
62

CSS 3 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 devez donc ajouter ce qui suit à votre feuille de style pour désactiver le redimensionnement de tous les éléments de zone de texte:

textarea { resize: none; }

Il s'agit d'une propriété CSS 3; utilisez 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 la zone de texte. Il s'agit de 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 reconsidérer le fonctionnement de votre conception. Tout utilisateur peut ajouter textarea { resize: both !important; }à sa feuille de style utilisateur pour remplacer votre préférence.

— James Sumners
source
Mais ce serait l'utilisateur qui casse intentionnellement sa mise en page, plutôt qu'un utilisateur qui a juste besoin de redimensionner son / sa texareaet finit par faire quelque chose qui ne fonctionne pas
— Redwolf Programs
21

Si vous avez besoin d'un soutien approfondi, vous pouvez utiliser une technique à l'ancienne:

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;
}
— yevgeniy
source
7
Utilisez également resize:nonecette solution pour éviter que la poignée n'apparaisse dans le coin inférieur, ce qui ne fonctionne pas de manière frustrante.
— MacroMan
13

Cela peut être fait facilement en HTML:

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

Cela fonctionne pour moi. La valeur par défaut est truepour l' draggableattribut.

— Thusitha Wickramasinghe
source
Il s'agit d'un attribut HTML 5, donc seuls les nouveaux navigateurs le prendront en charge. J'ai lu quelque part qu'IE le prend en charge à partir de 9 heures.
— Antony D'Andrea
4
Cela fonctionne dans la plupart des navigateurs. dans chaque dernier navigateur.
— Thusitha Wickramasinghe,
cela n'empêchera pas le redimensionnement de la zone de texte
— Mishko Vladimir
@ AntonyD'Andrea Cela ne fonctionne pas sur le dernier Chrome: jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

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

resize: none;

  • Vous pouvez soit l'appliquer en tant que propriété de style en ligne comme ceci:

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

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

    textarea {
    resize: none;
}
— Webeng
source
6

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

La propriété resize 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ébordement calculée est autre que "visible".

Redimensionner également non pris en charge dans Internet Explorer pour le moment.

Voici différentes propriétés de redimensionnement:

Pas de redimensionnement:

textarea {
  resize: none;
}

Redimensionnez les deux façons (verticalement et horizontalement):

textarea {
  resize: both;
}

Redimensionner verticalement:

textarea {
  resize: vertical;
}

Redimensionner horizontalement:

textarea {
  resize: horizontal;
}

De plus, si vous en avez widthet heightdans votre CSS ou HTML, cela empêchera le redimensionnement de votre zone de texte, avec une prise en charge plus large des navigateurs.

— Alireza
source
3

CSS 3 peut résoudre ce problème. Malheureusement, il n'est supporté que sur 60% des navigateurs utilisés de nos jours.

Pour Internet Explorer et iOS, vous ne pouvez pas désactiver le redimensionnement, mais vous pouvez limiter la textareadimension en définissant son widthet height.

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

Voir la démo

— Oriol
source
3

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;
— Peter Mortensen
source
2

J'ai créé une petite démo pour montrer comment fonctionnent les propriétés de redimensionnement. J'espère que cela vous aidera ainsi que 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>
Développer l'extrait

— Ambuj Khanna
source
1

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;" })
— Carlos de Jesus Baez
source
1
Bonjour, merci pour votre réponse, la prochaine fois veuillez formater le code.
— Baptiste Mille-Mathias
C'est la réponse basée sur MVC asp.net. Très agréable.
— yogihosting
0

Pour désactiver le redimensionnement pour tous les textareas:

textarea {
    resize: none;
}

Pour désactiver le redimensionnement pour un élément spécifique textarea, ajoutez un attribut name, ou un idet définissez-le sur quelque chose. Dans ce cas, il est nomménoresize

HTML

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

CSS

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

#noresize {
    resize: none;
}
— Abk
source
-2

L'ajout !importantfait fonctionner:

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

outline est juste pour éviter le contour bleu sur certains navigateurs.

— kaelds
source
6
N'abusez pas de l' !importantattribut. Inutile de fixer la largeur et la hauteur si l'attribut CSS resize: nonepeut supprimer la fonction de redimensionnement
— Raptor
1
N'est-ce pas !importantmal?
— Peter Mortensen du
Dans Chrome actuel, cela arrête le redimensionnement horizontal, mais je peux toujours redimensionner la zone de texte verticalement.
— Advait Junnarkar
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.