• 观察结果：此答案仅适用于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*/}中，因为这将使整个选择器无效。

• 以下是Map的所有（或大部分）Shadow DOM选择器：https://gist.github.com/afabbro/3759334
• 更多关于阴影穹顶（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)

我想提出我的解决方案
https://jsfiddle.net/tomoje/x96rL2sv/26/
它适用于每一个浏览器，设备类型，可以用鼠标和手指（触摸）操作，不使用任何图像等。
技巧是给予用户一个句柄，并将句柄扩展到整个工作区域，以避免鼠标/触摸在移动过程中从句柄区域中跳出（当javascript函数由于某些计算机占用或其他原因而变慢时可能发生）

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

我只用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/我希望这对某人有帮助