我在想;是否可以设置 css3 调整大小属性?
div {
resize: both;
overflow: auto;
}
我想要水平调整大小,并且想要垂直条,而不是默认情况下 Angular 落里的小东西。查看图像。简而言之,我可以这样做吗:
像这样:
...如果这不能通过 css 实现,还有其他想法吗?我想让事情尽可能轻。
最佳答案
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)
关于html - 可以设置 css3 resize 函数的样式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25845481/