web-dev-qa-db-fra.com

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

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

Cependant, dans Safari, il y a 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 se met fondamentalement sur le chemin.

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 penser à un meilleur terme.)

safariwebkitcss3
95
david.mchonechase

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

173
Tamas Czinege

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

textarea {
    resize: none;
}

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

Pour désactiver un TextArea spécifique avec l'attribut name 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 WebKit (c'est-à-dire Safari et Chrome), qui ajoutent la poignée de redimensionnement aux contrôles TextArea.

2
Gaurang P