HTML5/CSS3 - 更改调整大小句柄的外观

Question

我不想完全关闭调整大小,但textareas上的调整大小句柄不适合页面样式的其余部分.有没有办法可以改变它的外观,也许用我自己的形象取而代之？对于不支持HTML5的浏览器,不必具有向后兼容性.

Answer 1

我通过将textarea包装在DIV中,然后将一个:: after元素放在包含符号的div中,并且与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/

Answer 2

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

http://jsfiddle.net/qw73n/

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

http://jsfiddle.net/q5kdr/

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

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

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