在可调整大小的 div 中隐藏“调整大小”句柄？答案

【问题标题】：Hide the "resizing" handle in a resizable div?在可调整大小的 div 中隐藏“调整大小”句柄？
【发布时间】：2020-05-17 19:51:03
【问题描述】：

还有其他一些类似的问题，但没有一个有效或似乎在正确的区域。我正在尝试使表格的列宽可调整大小。我的表格是一个普通的 HTML table，除了它有 Bootstrap 4 类 table（也许他们可以想到一个不同的名字......！）。

我的 CSS 看起来像这样：

.resizable-div {
  resize: horizontal;
  overflow: auto;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;
  min-width: 100px;
  min-height: 30px;
}

我将单元格添加到表格行的 JS 相关位，其中包含一个可调整大小的 div，其中包含文本，如下所示：

row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);

结果很好：可调整大小的列。欢呼。美中不足只有一只苍蝇：

当然，我可以摆脱边界。我只想丢掉右下角那些讨厌的三角形处理程序……全部！

我意识到必须让用户知道他们能够调整列的大小......但如果我可以用 100% 透明的图标替换那些三角形图标（对于示例）。

编辑

Here's a JSFiddle!非常容易做到！

【问题讨论】：

你也可以分享你的 HTML 吗？
真的没有，只是一个body，下面有一个普通的div……table完全是通过JS的方式放在下面的。我以前从未做过 JSFiddle，也不知道它们是如何工作的。我愿意尝试，但在这种情况下，我怀疑这实际上不会给任何人带来太多启发：任何尝试这种技术的人都可能会发现这种现象。

标签： javascript html css resizable

【解决方案1】：

您可以在当前使用 ::-webkit-resizer 伪元素的基于 WebKit 的浏览器中执行此操作。

div{
overflow:auto;
resize:both;
width:50%;
}

div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}

<div>
Not Hidden
</div>

<div>
Hidden
</div>

【讨论】：

谢谢，但在我的浏览器 (FF 72) 中，您的 sn-p 中的两个 div 都有三角形...啊哈，但在 Chrome (79) 中，是的，第二个是隐藏的。我本人非常致力于 FF。
是的，FF 不是 webkit 浏览器

【解决方案2】：

WebKit 为这个::-webkit-resizer 提供了一个伪元素，您可以通过应用display: none、-webkit-appearance: none 或background: transparent 来隐藏这些三角形。

对于 Firefox 或没有 WebKit 的任何东西，替代/解决方法是将自定义句柄放置在每个可调整大小的 div 的顶部。不过，这可能需要一些不同的标记。

.wrapper {
  position: relative;
  display: inline-block;
}

.resizable-div {
  position: relative;
  resize: both;
  overflow: auto;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;
  min-width: 100px;
  min-height: 30px;
}

.handle {
  position: absolute; 
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: black;
  pointer-events: none;
}

/* ::-webkit-resizer {
    background: transparent;
} */

<div class="wrapper">
  <div class="resizable-div"></div>
  <div class="handle"></div>
</div>

【讨论】：