在 CSS 中隐藏调整大小手柄图标

Posted 2023-03-06

【中文标题】在 CSS 中隐藏调整大小手柄图标

【英文标题】：Hiding resize handle icon in CSS

【发布时间】：2018-04-16 09:47:32

【问题描述】：

例如我有某种表格：

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

我希望每个 th 列都可以调整大小，所以我添加了一些 CSS：

th > div 
    resize: horizontal;
    overflow: hidden;

一切正常，每一列都可以水平调整大小。 问题是在每个<th> 中我都有一个用于调整大小的图标。我希望它被隐藏起来。有没有办法做到这一点？

【问题讨论】：

尝试th > div, td > div - 您当前的选择器全部为th 和div 内的全部div。或者，如果您不希望 th div 可调整大小，只需从选择器中删除 th

这是调整大小图标，还是其他按钮？

是浏览器添加的resize图标。您也可以在 textarea 中看到这样的图标。

但是如果你让一个元素可调整大小，它需要那个图标来显示它的可调整大小和拖动位置，否则用户怎么知道它是可调整大小的？

我想在右边框悬停时添加特殊光标图标，而不是调整图标大小

【参考方案1】：

以下是三种可能的解决方案：

使用 ::webkit-resizer 伪选择器设置调整大小的样式 使用 :after 伪元素“隐藏”调整大小（并添加自定义光标） 使用:hover 伪类仅在:hover 上添加resize

---

1. 它不兼容跨浏览器，但可能对您有用 - ::-webkit-resizer 选择器。这允许对调整大小图标的样式进行一些基本控制。我们可以通过以下方式使其透明：

（这只适用于 Safari）

th > div,
td > div 
    resize: horizontal;
    overflow: hidden;
    text-align: left;


td > div::-webkit-resizer 
    background-color: transparent;

<strong>The `::-webkit-resizer` selector only works in Safari</strong>

<br/><br/>

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

2. 作为一种更跨浏览器的解决方案，我们可以将调整大小图标“隐藏”在:after 伪元素后面。这里的想法是创建一个:after 元素，它位于td > div 元素的右下角（在调整大小图标的顶部），其背景颜色与表格单元格的背景颜色相匹配。唯一剩下的更改是在单元格的右侧添加少量填充，这样:after psuedo 元素就不会覆盖单元格内容。

此选项的主要优点是我们可以添加您提到的您想要的自定义光标。使用td > div:hover:after 选择器，我们可以在可调整大小的表格单元格的右侧位于:hover 上时应用光标。像这样：

像这样：

th > div,
td > div 
  resize: horizontal;
  overflow: hidden;
  text-align: left;
  position: relative;
  padding: 0 8px 0 0;
  min-width: 45px;


td > div:after 
  content: "";
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: white;
  width: 8px;
  height: 100%;


td > div:hover:after 
  cursor: col-resize;

<table>
  <tr>
    <th>
      <div>Title1</div>
    </th>
    <th>
      <div>Title2</div>
    </th>
  </tr>

  <tr>
    <td>
      <div>Body1</div>
    </td>
    <td>
      <div>Body2</div>
    </td>
    <tr>
</table>

3. 如果我们希望单元格可以调整大小，隐藏调整大小的元素，并让元素可以调整大小变得明显，我们可以使用:hover psuedo 类。

通过一些实验，我发现如果同时使用:hover 和:active 伪类，此解决方案效果最好，否则如果拖动光标过快，调整大小的句柄会丢失。

th > div 
    resize: horizontal;
    overflow: hidden;
    text-align: left;


td > div 
    padding-right: 10px;
    min-width: 40px;


td > div:hover,
td > div:active 
    resize: horizontal;
    overflow: hidden;

<strong>The `::-webkit-resizer` selector only works in Safari</strong>

<br/><br/>

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>

【讨论】：

是的，现在你添加了光标，它很好，我正在尝试使用你覆盖的空间

它在没有自定义光标的情况下工作，只是不明显它是可能的。

第三种解决方案非常好！

【参考方案2】：

如果您想从每个td 中删除图标，只需使用th > div 选择器。

请看下面的例子：

如果你想玩那个调整大小的图标：Here

th > div
    resize: horizontal;
    overflow: hidden;

<table>
    <tr>
        <th><div>Title1</div></th>
        <th><div>Title2</div></th>
    </tr>

    <tr>
        <td><div>Body1</div></td>
        <td><div>Body2</div></td>
    <tr>
</table>