css - 我可以设置 textarea 的 resize grabber 样式吗？

Question

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

Answer 1

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

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

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

<textarea></textarea>

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

注意:将 display: none 添加到 ::-webkit-resizer 实际上并不会阻止用户调整文本区域的大小，它只是隐藏了控件.如果您想禁用调整大小，请将 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 上的 Chrome 26 中显示如下: