Cacher textarea poignée de redimensionnement dans Safari

Je suis en utilisant les composants textarea dans mon application, et je contrôle leur hauteur, de façon dynamique. Comme les types d'utilisateurs, la hauteur est augmentée à chaque fois qu'il y a assez de texte. Cela fonctionne très bien sur IE, Firefox et Safari.

Cependant, dans Safari, il y a une "poignée" d'outil en bas à droite qui permet à l'utilisateur de redimensionner la zone de texte en cliquant et en faisant glisser. J'ai aussi remarqué ce problème avec le textarea dans le stackoverflow Poser une Question la page. Cet outil est source de confusion et, fondamentalement, est dans la manière.

Alors, est-il de toute façon à masquer cette poignée de redimensionnement?

(Je ne sais pas si la "poignée" est le mot juste, mais je ne vois pas de meilleur terme.)

InformationsquelleAutor david.mchonechase | 2009-02-25
  1. 173

    Vous pouvez remplacer le redimensionner comportement avec les CSS:

    textarea
{
   resize: none;
}

    ou tout simplement

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

    Propriétés valides sont: les deux, à l'horizontale, à la verticale, aucun

    • Pas strictement pertinentes ici, mais Safari respecte aussi le min-height, max-height, min-width et max-width CSS les propriétés de laisser le redimensionnement activée, mais placer des limites sur la manière dont il peut redimensionner.
    • Merci!!!! Était sur le point de poser cette même question 🙂
    • Que faire si je veux l'afficher sur le vol stationnaire après j'ai mis resize:none ?
    • Forrest: avez-vous essayé textarea:hover { redimensionner: hériter !important; } ? Je ne l'ai jamais essayé, juste une supposition.
    • Une mise en garde: ne Pas permettre à l'utilisateur de redimensionner la <textarea> tout pourrait être un problème de convivialité. Réglage resize:vertical; est souvent une meilleure option. Il ne faut pas gâcher votre mise en page, et il donne à l'utilisateur un plus grand sentiment de contrôle.
    InformationsquelleAutor Tamas Czinege
  2. 2

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

    textarea {
    resize: none;
}

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

    Pour désactiver un spécifique TextArea avec le name attribut foo (c'est à dire, <TextArea name="foo"></TextArea>):

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

    Ou, à l'aide d'un ID (c'est à dire, <TextArea id="foo"></TextArea>):

    #foo {
    resize: none;
}

    Noter que cela n'est pertinent que pour WebKit navigateurs (c'est à dire, Safari et Chrome), qui ajoutent la poignée de redimensionnement pour TextArea contrôles.

    InformationsquelleAutor Gaurang P
  3. -1

    le safari max-hauteur max-width occasion aussi fonctionne dans firefox 4.0 (b3pre). un bon exemple ici par la voie: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

    InformationsquelleAutor fortrabbit-frank