我可以设置textarea的resize抓取器的样式吗？

Question

我的设计师给了我带有样式调整大小抓取器的文本区域的设计.问题是:我可以设计风格吗？

Answer 1

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

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

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

<textarea></textarea>

这在OS X上的Chrome 26中显示如下:

注意:添加display: none到::-webkit-resizer实际上并不会阻止用户调整textarea的大小,它只是隐藏了控件.如果要禁用调整大小,请将resizeCSS属性设置为none.这也隐藏了控件,并且具有在支持调整textareas大小的所有浏览器中工作的额外好处.

该::-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上的Chrome 26中显示如下:

Answer 2

::-webkit-resizer您可以使用某些标记创建"自定义"句柄,而不是将CSS应用于(在Chrome 56或FireFox 51中似乎不起作用).我在谷歌搜索后找到了这个例子:

自定义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;
}

Answer 3

此元素由浏览器本身呈现,不属于HTML规范.除非您的设计师正在创建自己的浏览器,否则您将无法使用所获得的浏览器.

Answer 4

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

<textarea/>