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

Ich versuche Punkte in einem zu entfernen, textareadie in der unteren rechten Ecke vorhanden sind.

Hier ist ein Beispiel für das, was ich meine (aus Chrome):

Wie entferne ich diese diagonalen Linien?

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.

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

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

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;
}