Ausblenden der Größe des Textbereichs in Safari

97

Ich verwende Textbereichskomponenten in meiner Anwendung und steuere deren Höhe dynamisch. Während der Benutzertyp wird die Höhe erhöht, wenn genügend Text vorhanden ist. Dies funktioniert gut unter IE, Firefox und Safari.

In Safari gibt es jedoch unten rechts ein "Handle" -Werkzeug, mit dem der Benutzer die Größe des Textbereichs durch Klicken und Ziehen ändern kann. Ich habe auch dieses Problem mit dem Textbereich auf der Seite "Stapelüberlauf stellen eine Frage" festgestellt. Dieses Tool ist verwirrend und stört im Grunde.

Gibt es also überhaupt eine Möglichkeit, dieses Größenänderungs-Handle auszublenden?

(Ich bin nicht sicher, ob "handle" das richtige Wort ist, aber ich kann mir keinen besseren Begriff vorstellen.)

safari webkit css david.mchonechase
quelle

Antworten:

177

Sie können das Größenänderungsverhalten mit CSS überschreiben:

textarea
{
   resize: none;
}

oder einfach nur

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

Gültige Eigenschaften sind: beide, horizontal, vertikal, keine

Tamas Czinege
quelle
22
Hier nicht unbedingt relevant, aber Safari berücksichtigt auch die CSS-Eigenschaften für minimale Höhe, maximale Höhe, minimale Breite und maximale Breite, um die Größenänderung aktiviert zu lassen, begrenzt jedoch die Größenänderung.
Stevemegson
1
Danke dir! Wollte gerade die gleiche Frage stellen :)
Alex
Was ist, wenn ich es beim Schweben anzeigen möchte, nachdem ich die Größe geändert habe: keine?
Michael Forrest
@ Michael Forrest: Haben Sie versucht, Textarea: Hover {Größe ändern: erben! Wichtig; }? Ich habe es nie versucht, nur eine Vermutung.
Tamas Czinege
7
Eine Einschränkung: Es kann <textarea>ein Usability-Problem sein , dem Benutzer nicht zu erlauben, die Größe zu ändern . Die Einstellung resize:vertical;ist oft eine bessere Option. Es sollte Ihr Layout nicht durcheinander bringen und gibt dem Benutzer ein besseres Gefühl der Kontrolle.
Web_Designer
2

Verwenden Sie die folgende CSS-Regel, um dieses Verhalten für alle TextAreaElemente zu deaktivieren :

textarea {
    resize: none;
}

Wenn Sie es für einige (aber nicht alle) TextAreaElemente deaktivieren möchten, haben Sie einige Optionen (dank dieser Seite ).

So deaktivieren Sie ein bestimmtes Attribut TextAreamit dem nameAttribut foo(dh <TextArea name="foo"></TextArea>):

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

Oder unter Verwendung einer ID (dh <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Beachten Sie, dass dies nur für WebKit-basierte Browser (z. B. Safari und Chrome) relevant ist, die TextAreaSteuerelementen das Größenänderungshandle hinzufügen .

Gaurang P.
quelle