Уголок в textarea

В нижнем углу текстового поля, созданного с помощью тега textarea, есть треугольник. Потянув за него, пользователь самостоятельно может поменять размер элемента.

<textarea>По умолчанию</textarea>

Убрать возможность изменения размера textarea

<style>
textarea {
  resize: none;
}
</style>

<textarea>Запретить изменять размер</textarea>

<style>
div {
  resize: none; /* свойство resize не наследуется, применяется к нестрочным элементам с overflow не visible */
  overflow: auto;
}
</style>

<div>Содержимое</div>

Почему не работает resize

overflow не должно иметь значение visible (то, что по умолчанию)

<style>
div {
  border: 1px solid;
  resize: both;
}
</style>

<div>Нельзя изменять размер</div>

<style>
div {
  border: 1px solid;
  resize: both;
  overflow: auto;
}
</style>

<div>Можно изменять размер</div>

Элемент не должен быть строчным

<style>
span {
  border: 1px solid;
  resize: both;
  overflow: auto;
}
</style>

<span>Нельзя изменять размер</span>

<style>
span {
  border: 1px solid;
  resize: both;
  overflow: auto;
  display: inline-block;
}
</style>

<span>Нельзя изменять размер</span>

Почему к textarea применяется resize

Для тега textarea нельзя установить ни display: inline; [mozilla.org], ни overflow: visible; [mozilla.org].

<style>
textarea {
  display: inline;
  overflow: visible;
}
</style>

<textarea>При переполнении содержимое не выходит за границы установленной ширины и высоты элемента</textarea>

Пользователь может растянуть элемент в обе стороны одновременно по горизонтали (и влево, и в право)

Сначала занимает свободное пространство родителя.

<style>
textarea {
  display: block;
  margin: 0 auto;
  resize: horizontal;
}
</style>

<textarea>Можно изменять размер</textarea>

Пример использования: «Демонстрация работы градиента»

Ограничить предел расширения

<style>
textarea {
  max-width: 30em;
  max-height: 30em;
}
</style>

<textarea>Можно изменять размер</textarea>

Зависимость размера треугольника от толщины полосы прокрутки

Если есть полоса прокрутки, то уголок располагается под ней, иначе наезжает на содержимое.

<textarea style="scrollbar-width: auto;">auto</textarea>
<textarea style="scrollbar-width: thin;">thin</textarea>
<textarea style="scrollbar-width: none;">none</textarea>

<!-- На момент правки статьи отсутствует поддержка scrollbar-width в WebKit -->

Убрать треугольник в textarea

<style>
textarea::-webkit-resizer {  /* нестандартный псевдоэлемент только для  WebKit */
  display: none;
}
</style>

<textarea>Можно изменять размер</textarea>

Изменить стиль области захвата, образованного resize

<style>
textarea::-webkit-resizer {  /* нестандартный псевдоэлемент только для  WebKit */
  background: linear-gradient(315deg,
    blue 16%,
    #0000 16% 26%,
    blue 26% 33%,
    #0000 33% 43%,
    blue 43% 50%,
    #0000 50% 100%) no-repeat;
  background-size: 90% 90%;
}
</style>

<textarea>Можно изменять размер</textarea>