Могу ли я нарисовать маркер изменения размера textarea?

Ответ 1

Этот элемент отображается самим браузером и не является частью спецификации HTML. Если ваш дизайнер не создает свой собственный браузер, вы застряли с тем, что получаете.

Ответ 2

WebKit предоставляет псевдоэлемент ::-webkit-resizer для элемента управления размером, который он автоматически добавляет в нижнем правом углу элементов textarea.

Его можно скрыть, применив display: none или -webkit-appearance: none:

::-webkit-resizer {
  display: none;
}

<textarea></textarea>

Ответ 3

Вместо применения CSS к ::-webkit-resizer (который, как представляется, не работает в Chrome 56 или FireFox 51), вы можете создать "настраиваемый" дескриптор, используя некоторую разметку. Я нашел этот пример после поиска в Google:

Пользовательский CSS3 TextArea Изменить размер

Скопированная разметка в случае будущей мертвой ссылки:

<div class="wrap">
  <div class="pull-tab"></div>
  <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

И CSS из примера - конечно, вы можете применить любой стиль, который вам нравится:

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}
.wrap:after {
    content:"";
    border-top: 20px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    right: -18px;
    bottom: -3px;
    pointer-events: none;
}
.pull-tab {
    height: 0px;
    width: 0px;
    border-top: 20px solid cyan;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    bottom: 0px;
    right: -15px;
    pointer-events: none;
    z-index: 2;
}

Ответ 4

Почему бы просто не показать фоновое изображение? http://jsfiddle.net/1n0d529p/

textarea {
  background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
  background-size: 12px;
}

Ответ 5

Мне удалось сделать это следующим образом:

.textarea-container:before {
    content: '';
    background-image: url(svg/textarea-resize.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 2px;
    right: 0;
    pointer-events: none;
}