html - 可以设置 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/

最后的想法

我::-moz-resizer在FF22上测试过，没有用。所以是的，你一直在制作 javascript 版本，模仿 StackOverflow 的 textarea 句柄。

---

额外信息

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

• 这里映射了所有（或大部分）Shadow DOM 选择器：https ://gist.github.com/afabbro/3759334
• 有关 Shadow Dom (HTML5Rocks) 的更多信息，请点击此处和此处。
• 带有屏幕的阴影 dom 选择器的更好看和有组织的列表
• Mozilla 的选择器列表（没有用于调整大小的伪选择器）

Answer 2

我想提出我的解决方案

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

它适用于所有浏览器，设备类型，可以用鼠标和手指（触摸）操作，不使用任何图像等。

诀窍是给用户一个句柄并将句柄扩展到整个工作区域，以避免在移动过程中鼠标/触摸从句柄区域退出（当javascript函数由于某些计算机占用或别的）

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