Frage Wie resizierbare Eigenschaft von Textarea zu deaktivieren?


Ich möchte die veränderbare Eigenschaft von a deaktivieren textarea.

Zur Zeit kann ich die Größe ändern textarea durch Klicken auf die untere rechte Ecke des textarea und ziehe die Maus. Wie kann ich das deaktivieren?


2154
2018-03-08 16:15


Ursprung


Antworten:


Die folgende CSS-Regel deaktiviert das Ändern der Größe für textarea Elemente:

textarea {
  resize: none;
}

Um es für einige (aber nicht alle) zu deaktivieren textareas, da sind a einige Optionen.

Um ein bestimmtes zu deaktivieren textarea mit dem name Attribut festgelegt auf foo (d. h. <textarea name="foo"></textarea>):

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

Oder mit einem id Attribut <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Das W3C Seite Listet mögliche Werte für Größenänderungseinschränkungen auf: Keine, horizontal, vertikal und erben:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Review eine anständige Kompatibilitätsseite um zu sehen, welche Browser diese Funktion derzeit unterstützen. Wie Jon Hulka bemerkt hat, können die Dimensionen sein weiter zurückhaltend in CSS mit max-width, max-height, min-width und min-height.

Super wichtig zu wissen:

Diese Eigenschaft führt nichts aus, es sei denn, die Überlaufeigenschaft ist etwas anderes als sichtbar, was für die meisten Elemente der Standardwert ist. Um dies zu verwenden, müssen Sie etwas wie Überlauf einstellen: scroll;

Zitat von Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2861
2018-03-08 16:17



In CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Ich habe 2 Dinge gefunden

zuerst

textarea{resize:none}

Das ist ein CSS3 welches noch nicht veröffentlicht wurde kompatibel mit Firefox4 + Chrome und Safari 

ein anderes Format-Feature ist zu Überlauf: Automatisch um die richtige Bildlaufleiste zu entfernen, die berücksichtigt wird Richt Attribut

Code und verschiedene Browser

Grundlegender HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Einige Browser

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • Chrom

enter image description here


91
2017-12-27 20:58



CSS3 hat ein neues Property für UI-Elemente, mit denen Sie dies tun können. Das Eigentum ist der Größe ändern. Daher würden Sie Ihrem Stylesheet Folgendes hinzufügen, um die Größenänderung aller Textbereichselemente zu deaktivieren:

textarea { resize: none; }

Dies ist eine CSS3-Eigenschaft. benutze einen Kompatibilitätstabelle um die Browserkompatibilität zu sehen.

Persönlich würde ich es sehr ärgerlich finden, wenn die Größenänderung bei Textarea-Elementen deaktiviert ist. Dies ist eine der Situationen, in denen der Designer versucht, den Client des Benutzers zu "brechen". Wenn Ihr Design keine größere Textfläche aufnehmen kann, sollten Sie die Funktionsweise Ihres Designs überdenken. Jeder Benutzer kann hinzufügen textarea { resize: both !important; } zu ihrem Benutzer-Stylesheet, um Ihre Präferenz zu überschreiben.


57
2018-03-08 16:35



<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19



Wenn Sie tiefe Unterstützung benötigen, können Sie die Old-School-Technik verwenden

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

18
2018-02-12 12:14



Dies kann in HTML leicht gemacht werden

<textarea name="textinput" draggable="false"></textarea>

Das funktioniert für mich. Standardwert ist true zum draggable Attribut.


9
2017-07-21 05:18