So entfernen Sie die Option zur Größenänderung in der unteren rechten Ecke des ?

Ich versuche, Punkte in einem zu entfernen <textarea> die in der unteren rechten Ecke vorhanden sind.

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

Wie entferne ich diese diagonalen Linien?

Fügen Sie einfach Ihre hinzu CSS Datei

textarea { resize: none; }

Später (2019) bearbeitet: Bezogen auf diese Antwort von mir und die steigende Zahl von GitHub-Code-Suchergebnissen auf resize: none Erklärungen angewendet auf textarea Elemente habe ich einige Zeilen darüber geschrieben, warum ich denke, dass CSS keine Größenänderung ermöglicht textarea ist schlecht für UX:

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

Manchmal müssen Sie eine lange Antwort eingeben, die aus vielen Absätzen besteht, und wenn Sie diesen Text in ein winziges Textfeld einbetten, ist es schwierig, ihn zu verstehen und während der Eingabe zu folgen. Es kam oft vor, dass ich diesen Text beispielsweise 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 resize: none-Deklaration zu überschreiben, aber das ist keine wirklich produktive Art, Dinge zu erledigen.

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

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

Es ist so einfach wie der folgende Code. Geben Sie einfach dem Textbereich den Stil resize: 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;
}