可以设置css3调整大小功能的样式吗？

Question

我在想;是否可以样式 css3 resize属性？

div
{
resize:both;
overflow:auto;
}

我想要一个水平调整大小，并且想要一个垂直条，而不是默认角落里的小东西。看图像。简而言之，我可以这样做：

这样的事情：

...如果这不可能通过CSS，任何其他想法？我希望尽可能保持轻量级。

Answer 1

Obs：这个答案仅针对WebKit，找不到其他浏览器，也没有使用-名称进行测试。

---

代码：

考虑到你有一个带有以下CSS的元素：

.styled {
    resize:both;
    overflow:auto;
    background:orange; /* just for looks */
}

如果添加webkit的特定伪选择器::-webkit-resizer，则可以设置样式的样式：

::-webkit-resizer {
    border: 2px solid yellow;
    background: blue;
    box-shadow: 0 0 2px 5px red;
    outline: 2px dashed green;

    /*size does not work*/  
    display:block;  
    width: 150px !important;
    height: 150px !important;
}

---

<强>视觉：

http://jsfiddle.net/RaphaelDDL/ryphs/1/

最后的想法

我在FF22上使用::-moz-resizer进行了测试，但没有奏效。所以是的，你坚持制作javascript版本，模仿StackOverflow的textarea句柄。

---

额外信息

为阴影dom伪选择器设置样式时， NOT 将它们堆叠到单个选择器::-webkit-resizer, ::-moz-resizer { /*css*/}中，因为它会使整个选择器无效。

• 这里映射了所有（或大部分）Shadow DOM选择器：https://gist.github.com/afabbro/3759334
• 有关Shadow Dom（HTML5Rocks）here和here的更多信息。
• Better looking and organized list of shadow dom selectors with screens
• List of Mozilla's selectors (there is no pseudo-selector for resizer)

Answer 2

我想提出我的解决方案

https://jsfiddle.net/tomoje/x96rL2sv/26/

它适用于每种浏览器，各种设备，可以用鼠标和手指（触摸）进行操作，并且不使用任何图像等。

诀窍是为用户提供一个手柄并将其扩展到整个工作区域，以避免在移动过程中鼠标/触摸从手柄区域伸出（这可能在javascript功能由于某些原因而变慢时发生）还是计算机占领）

<div class="cSuwakT" id="idSuwakKontenerGalka"></div>

Answer 3

简而言之，我在本文中找到了最佳答案：Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

轻巧简单。我在这里将我的帖子标记为重复。