Wie entferne ich die Größenänderungsoption in der rechten unteren Ecke des Textbereichs?

Antworten:

138

Fügen Sie einfach Ihre CSSDatei hinzu

textarea { resize: none; }

Später (2019) bearbeiten: Im Zusammenhang mit meiner Antwort und der steigenden Anzahl von GitHub-Codesuchergebnissen für resize: noneDeklarationen, die auf textareaElemente angewendet werden, habe ich einige Zeilen darüber geschrieben, warum ich denke, dass die Größenänderung von CSS textareafür UX schlecht ist:

Sehr oft ist der Textbereich auf eine Reihe von Zeilen und Spalten beschränkt oder hat eine feste Breite und Höhe, die über CSS definiert wird. Aufgrund meiner eigenen Erfahrung ist es sehr frustrierend, auf Foren zu antworten, Kontaktformulare auf Websites zu schreiben, Live-Chat-Popups oder sogar private Nachrichten auf Twitter auszufüllen.

Manchmal müssen Sie eine lange Antwort eingeben, die aus vielen Absätzen besteht. Wenn Sie diesen Text in ein kleines Textfeld einbinden, ist es schwierig, ihn während der Eingabe zu verstehen und zu befolgen. Es gab viele Male, in denen ich diesen Text zum Beispiel in Notepad ++ schreiben und dann einfach die gesamte Antwort in diesen kleinen Textbereich einfügen musste. Ich gebe zu, dass ich auch die DevTools geöffnet habe, um die Größenänderung zu überschreiben: keine Deklaration, aber das ist keine wirklich produktive Methode, um Dinge zu tun.

von https://catalin.red/css-resize-none-is-bad-for-ux/

Vielleicht möchten Sie dies überprüfen, bevor Sie das Obige zu Ihren Stylesheets hinzufügen.

rot
quelle
Damit jeder weiß, dass die Größenänderung eine CSS 3-Funktion ist und von IE Firefox oder Chrome nicht überall unterstützt wird.
S ..
2
Ja, das funktioniert und S .. ist falsch wegen der mangelnden Browserunterstützung. Psyche! Er veröffentlichte es 2012, als es zu Recht keine Browserunterstützung gab. Achten Sie mehr auf die Post-Daten, Jungs.
Braden Best
2

Es ist so einfach wie der folgende Code. Geben Sie dem Textbereich einfach den Stilresize: none

<textarea style="resize: none"></textarea>
Erweitern Sie das Snippet

Asma Alfauri
quelle
Das Symbol wird jedoch entfernt, aber auch die Größenänderung ist deaktiviert. Gibt es eine Möglichkeit, es zu entfernen, aber die Größe der Box kann geändert werden?
Atousa Darabi
0

html

Sass

textarea {
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;
}

.resizer {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  }
}
.arrow-resizer-textarea {
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;
}
dreizehn
quelle