我可以风格textarea的大小调整抓取？(Can I style the resize grabb

我的设计师只是给了我与风格的大小调整抓取文本区域的设计。 现在的问题是：我可以风格与否？

Answer 1:

此元素是由浏览器本身呈现的，而不是HTML规范的一部分。 除非你的设计师正在创造自己的浏览器，你坚持你的人。

Answer 2:

的WebKit提供伪元素::-webkit-resizer为它自动添加到右下角的调整大小控制textarea元件。

它可以通过应用被隐藏display: none或-webkit-appearance: none ：

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

 <textarea></textarea> 

这显示为在OS X在铬26如下：

注意：添加display: none以::-webkit-resizer实际上并不阻止用户调整textarea的，它只是隐藏的控制。 如果您希望禁用调整大小，设置resize CSS属性none 。 这也隐藏了控制，并已在支持文本域调整所有的浏览器工作的好处。

该::-webkit-resizer伪元素也允许一些基本的造型。 如果您认为调整大小的控制可以使用显著更多的色彩，你可以补充一点：

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

 <textarea></textarea> 

这显示为在OS X在铬26如下：

Answer 3:

相反，应用CSS来的::-webkit-resizer （不出现在Chrome 56或Firefox 51是工作），您可以创建使用一些标记“自定义”手柄。 我发现谷歌搜索后，这个例子：

自定义文本区CSS3缩放柄

复制标记在未来的死链接的情况下：

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

文章来源: Can I style the resize grabber of textarea?