Masquage de la poignée de redimensionnement textarea dans Safari

Question

J'utilise des composants textarea dans mon application, et je contrôle leur hauteur dynamiquement. Au fur et à mesure que l'utilisateur tape, la hauteur est augmentée chaque fois qu'il y a suffisamment de texte. Cela fonctionne très bien sur IE, Firefox et Safari. Toutefois, dans Safari, un outil "handle" en bas à droite permet à l'utilisateur de redimensionner la zone de texte en cliquant et en faisant glisser. J'ai également remarqué ce problème avec le textarea dans la page Poser une question de stackoverflow. Cet outil est déroutant et fondamentalement entrave.

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

(Je ne sais pas si « poignée » est le mot juste, mais je ne peux pas penser à un meilleur terme.)

Answer 1

Vous pouvez remplacer le comportement de modification de taille avec CSS:

textarea 
{ 
    resize: none; 
} 

ou tout simplement

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

propriétés valides sont: à la fois, horizontal, vertical, aucun

Answer 2

le saf L'option ari max-height max-width fonctionne également dans firefox 4.0 (b3pre). bon exemple de la façon suivante: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

Answer 3

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

textarea { 
    resize: none; 
} 

Si vous souhaitez le désactiver pour certains (mais pas tous) TextArea éléments, vous avoir quelques options (merci à this page).

Pour désactiver un TextArea spécifique avec l'attribut name mis à foo (c.-à-<TextArea name="foo"></TextArea>):

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

Ou, en utilisant un ID (c.-à-<TextArea id="foo"></TextArea>):

#foo { 
    resize: none; 
} 

Notez que cette est uniquement pertinent pour les navigateurs WebKit (c'est-à-dire Safari et Chrome), qui ajoutent le handle de redimensionnement aux contrôles TextArea.