html - 可以设置 css3 resize 函数的样式吗？

Question

我在想；是否可以设置 css3 调整大小属性？

div {
  resize: both;
  overflow: auto;
}

我想要水平调整大小，并且想要垂直条，而不是默认情况下 Angular 落里的小东西。查看图像。简而言之，我可以这样做吗:

像这样:

...如果这不能通过 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 的文本区域句柄。

---

额外信息

当设置 shadow dom 伪选择器的样式时，不要将它们堆叠到单个选择器中 ::-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)