WebKit为调整大小控件提供了伪元素::-webkit-resizer，它自动添加到textarea元素的右下角。
它可以通过应用display: none或-webkit-appearance: none隐藏：

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

个字符
这在OS X上的Chrome 26中显示如下：

的数据

• 注意事项：将display: none添加到::-webkit-resizer实际上并不会阻止用户禁用文本区域，它只是隐藏了控件。如果您想禁用文本区域，请将resize CSS属性设置为none。这也隐藏了控件，并且具有在所有支持文本区域的浏览器中工作的额外好处。*

::-webkit-resizer伪元素也允许一些基本的样式。如果你认为resize控件可以使用更多的颜色，你可以添加这个：

::-webkit-resizer {
  border: 2px solid black;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;
}

<textarea></textarea>

的字符串
这在OS X上的Chrome 26中显示如下：

的

你可以使用一些标记来创建一个“自定义”句柄，而不是将CSS应用到::-webkit-resizer（这在Chrome 56或FireFox 51中似乎不起作用）。我在谷歌搜索后发现了这个例子：
Custom CSS3 TextArea Resize Handle
复制标记，以防将来出现死链接：

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

型

textarea::-webkit-resizer {
  border-width: 8px;
  border-style: solid;
  border-color: transparent orangered orangered transparent;
}

个字符

为什么不直接显示背景图片？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;
}

字符串

使用@HorusKol的方法设计textarea的调整大小抓取器
Codepen url

textarea {
    /* Ignore this part of code - basic textarea formatting */
    margin-top: 20px;
    margin-left: 20px;
    width:300px;
    padding:20px;
    border:1px solid #CCC;
    border-radius: 4px;
    /* Comment below line to resize horizontal + vertical */
    resize:vertical 
    /* Step 1 */
    position: relative;
}
    /* Step 2 */
.wrap {
    position: relative;
    display: inline-block;
}
    /* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
    content:"";
    border-top: 2px solid #555;
    width:16px;
    transform: rotate(-45deg);
    background:transparent;
    position: absolute;
    right: 1px;
    bottom: 14px;
    pointer-events: none;
    border-radius:25%;
}
    /* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
    border-top: 2px solid #555;
    width:10px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 10px;
    right: 1px;
    pointer-events: none;
    border-radius:25%;
}
    /* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
  display:none;
}

个字符

我是这样做的：

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

字符串

textarea {
  resize: none;
}

个字符