如何更改调整大小手柄的外观？

Question

我不想完全关闭调整大小，但 textareas 上的调整大小句柄不适合页面样式的其余部分。有没有办法改变它的外观，也许用我自己的图像替换它？不支持 HTML5 的浏览器不必向后兼容。

原文由 Fibericon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是困难的一个。无法设置此特定控件的样式。即使您在 webkit 下强制使用不同的外观，您仍然会得到该死的调整大小句柄：

http://jsfiddle.net/qw73n/

但是，您可以解决它并将背景图像放在左下角：

http://jsfiddle.net/q5kdr/

但是处理程序仍然会出现在它上面。

恐怕唯一的选择是使用可调整大小的 jQuery UI：

http://jqueryui.com/demos/resizable/

原文由 methodofaction 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我通过将 textarea 包装在一个 DIV 中，然后在该 div 中放置一个 ::after 元素来实现这一点，该元素包含一个符号并且具有与 textarea 相同的背景颜色。

重要的是给 ::after 元素“pointer-events: none;”因为否则用户无法点击它。这适用于所有现代浏览器 ( http://caniuse.com/#feat=pointer-events )。

 .textarea_wrapper::after {
    pointer-events: none;
    content: "↓";
    font-size: 14px;
    position: absolute;
    height: 22px;
    width: 20px;
    text-align: center;
    bottom: 2px;
    right: -2px;
    background-color: #efefef;
    color: #777;
}

这是一个小提琴：http: //jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

原文由 herrfischer 发布，翻译遵循 CC BY-SA 3.0 许可协议