Question

我正在尝试创建一个样式的textarea，为此它完成了99％，但最后一件事仍然存在。右下角的调整大小图标，我知道在基于wekbit的浏览器中你有textarea::-webkit-resizer，但我找不到任何firefox / IE等。

如果有人可以提供帮助，我们非常感谢。

我的示例代码是：

SCSS：

textarea.myTextArea {
    background-color: $my-color;
    border: 0;

    &::-webkit-resizer {
        background-image: url('images/myimage.svg');
    }
}

Answer 1

将其作为答案：

任何版本的IE都不支持CSS3属性resize - 包括Edge。（http://caniuse.com/#feat=css-resize）

据我所知，它无法在Firefox中设置resize-handler的样式。 resize属性仍然是W3C CSS3草案（请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/resize#Specifications或https://www.w3.org/TR/css-ui-3/#resize）因此，您可以通过不使用草稿属性来完成并保存性能，处理类似于您现在面临的问题，或使用外部库来模拟它并影响页面加载时间。

作为旁注：FOUC可以避免或更具体地隐藏＆＃34;通过隐藏页面内容直到所有内容都相应地设置样式 - 例如使用回调并尽可能避免使用 window.load 。

我知道要实现跨浏览器可调整大小的textareas（和其他元素）的一个好的JS库是https://jqueryui.com/resizable/#textarea。

设置textarea resizer块的样式

1 个答案: