Як видалити параметр зміни розміру, присутній у правому нижньому куті текстової області?

Question 1

Я намагаюся видалити крапки, textareaякі знаходяться в нижньому правому куті.

Ось приклад того, що я маю на увазі (з Chrome):

Як прибрати ці діагональні лінії?

Question 2

Просто додайте свій CSSфайл

textarea { resize: none; }

Пізніше (2019) редагування: Пов’язане з цією моєю відповіддю та збільшенням кількості результатів пошуку коду GitHub щодо resize: noneоголошень, застосованих до textareaелементів, я написав кілька рядків про те, чому, на мою думку, CSS не змінює розмір жодного, textareaце погано для UX:

Дуже часто текстова область обмежується кількістю рядків і стовпців або має фіксовану ширину та висоту, визначені за допомогою CSS. Грунтуючись виключно на власному досвіді, відповідаючи на форуми, пишучи контактні форми на веб-сайтах, заповнюючи спливаючі вікна чату або навіть приватні повідомлення в Twitter, це дуже неприємно.

Іноді вам потрібно ввести довгу відповідь, яка складається з багатьох абзаців, і загортання цього тексту в крихітне текстове поле ускладнює розуміння та дотримання під час введення тексту. Бувало багато випадків, коли мені доводилося писати цей текст в Notepad ++, наприклад, а потім просто вставляти всю відповідь у це невелике текстове поле. Я визнаю, що я також відкрив DevTools, щоб замінити декларацію resize: none, але це насправді не є продуктивним способом зробити щось.

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

Тож, можливо, ви захочете перевірити це, перш ніж додавати вище у свої таблиці стилів.

Question 3

Це так само просто, як наступний код. Просто надайте текстовій області стильresize: none

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

Розгорніть фрагмент

Question 4

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