Masquer la poignée de redimensionnement de la zone de texte dans Safari

97

J'utilise des composants textarea dans mon application et je contrôle leur hauteur de manière dynamique. Au fur et à mesure que l'utilisateur tape, la hauteur augmente chaque fois qu'il y a suffisamment de texte. Cela fonctionne bien sur IE, Firefox et Safari.

Cependant, dans Safari, il existe un outil «poignée» en bas à droite qui permet à l'utilisateur de redimensionner la zone de texte en cliquant et en faisant glisser. J'ai également remarqué ce problème avec la zone de texte dans la page Poser une question de stackoverflow. Cet outil est déroutant et gêne fondamentalement.

Alors, est-il possible de masquer cette poignée de redimensionnement?

(Je ne sais pas si "gérer" est le bon mot, mais je ne peux pas trouver de meilleur terme.)

safari webkit css david.mchonechase
la source

Réponses:

177

Vous pouvez remplacer le comportement de redimensionnement avec CSS:

textarea
{
   resize: none;
}

ou tout simplement

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

Les propriétés valides sont: both, horizontal, vertical, none

Tamas Czinege
la source
22
Ce n'est pas strictement pertinent ici, mais Safari respecte également les propriétés CSS min-height, max-height, min-width et max-width pour laisser le redimensionnement activé mais placer des limites sur la distance à laquelle il peut être redimensionné.
stevemegson
1
Je vous remercie! Était sur le point de poser cette même question :)
alex
Que faire si je veux l'afficher en survol après avoir défini le redimensionnement: aucun?
Michael Forrest
@Michael Forrest: avez-vous essayé textarea: hover {redimensionner: inherit! Important; }? Je ne l'ai jamais essayé, juste une supposition.
Tamas Czinege
7
Une mise en garde: ne pas autoriser l'utilisateur à redimensionner le <textarea>peut être un problème d'utilisabilité. Le réglage resize:vertical;est souvent une meilleure option. Cela ne devrait pas gâcher votre mise en page et donner à l'utilisateur un plus grand sentiment de contrôle.
Web_Designer
2

Utilisez la règle CSS suivante pour désactiver ce comportement pour tous les TextAreaéléments:

textarea {
    resize: none;
}

Si vous souhaitez le désactiver pour certains éléments (mais pas tous) TextArea, vous avez quelques options (grâce à cette page ).

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 identifiant (c'est-à-dire <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Notez que cela n'est pertinent que pour les navigateurs basés sur WebKit (c'est-à-dire Safari et Chrome), qui ajoutent la poignée de redimensionnement aux TextAreacontrôles.

Gaurang P
la source