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

Question

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

div {
  resize: both;
  overflow: auto;
}

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

变成这样的东西：

...如果这不能通过 css 实现，还有其他想法吗？我想让东西尽可能轻。

Answer 1

Obs：此答案仅适用于 WebKit，无法找到其他浏览器，也无法使用其

-

名称进行测试。

---

代码：

考虑到您有一个具有以下 CSS 的元素：

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

如果添加webkit特有的伪选择器

::-webkit-resizer

，就可以对handle进行样式化：

::-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 伪选择器的样式时，NOT 将它们堆叠到单个选择器中

::-webkit-resizer, ::-moz-resizer { /*css*/}

因为会使整个选择器无效。

• 这里映射了所有（或大部分）Shadow DOM 选择器：https://gist.github.com/afabbro/3759334
• 有关 Shadow Dom（HTML5Rocks）的更多信息这里和这里.
• 带屏幕的 shadow dom 选择器的外观和组织列表更好
• Mozilla的选择器列表（resizer没有伪选择器）

Answer 2

我想提出我的解决方案

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

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

技巧是给用户一个句柄并将句柄扩展到整个工作区域，以避免鼠标/触摸在移动过程中走出句柄区域（这可能发生在javascript函数由于某些计算机占用而变慢时否则）

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

Answer 3

我只使用 css（仅限 webkit）完成这项工作，有点复杂，但如果您的内容不是交互式的，您可以只使用几个类。

这利用了调整大小取决于滚动条的宽度和高度的事实。

我用这个答案想出了让父级匹配子级缩放器大小的技巧。 仅使用 CSS 将父宽度设置为等于子总宽度？

/* an invisible scroll bar covers the content if you dont use a parent.
you can omit the parent if your content is not interactive.
using a parent allows the content to be clickable and also avoids scrolling the content
is better overall but more complicated
*/
.resize-parent {
  background-color: orange;
  position: relative;
  display: inline-block;
  overflow: clip;
}

.resize {
  background-color: wheat;
  width: 300px;
  height: 250px;
  position: relative;
  resize: horizontal;
  overflow-x: overlay;
  z-index: 0; /* this makes the content clickable */
}


/* this is necesary to make the scrollbars appear */
.resize::before {
  content: "";
  width: 105%;
  height: 105%;
  background: transparent;
  pointer-events: none;
  display: block;
  position: absolute;
}


/* not necesarry if not using a parent */
.resize-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding-left: 10px; /* same scrollbar width */
  margin-left: -10px; /* same scrollbar width */
  background: silver;
}


/* the scrollbar controls the size of the resizer */
.resize::-webkit-scrollbar {
  height: 250px; /*at least the same as .resize */
  width: 10px; /* as desired */
}

.resize::-webkit-resizer {
  background: cadetblue;
}

/* this is behind of the resizer and can be used to style it */
.resize::-webkit-scrollbar-corner {
  background: gold;
}

/* used to figure out how this works */
.resize::-webkit-scrollbar:horizontal {}
.resize::-webkit-scrollbar-button {}
.resize::-webkit-scrollbar-track {}
.resize::-webkit-scrollbar-track-piece {}
.resize::-webkit-scrollbar-thumb {}

<div class="resize">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <a href="#">Click</a>
</div>

<div class="resize-parent">
  <div class="resize-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <a href="#">Click</a><br>
  </div>
  <div>
    <div class="resize"></div>
  </div>
</div>

http://jsfiddle.net/v6donx53/ 我希望这对某人有帮助