如何用CSS在2024年跨浏览器隐藏可调整大小元素的缩放手柄

针对可调整大小的元素，要隐藏各浏览器原生的缩放手柄、同时保留自定义手柄功能，可使用以下CSS方案：

核心代码 #

/* WebKit/Blink内核浏览器（Chrome、Edge、Safari等） */
.resizable-element::-webkit-resizer {
  display: none;
}

/* Firefox 浏览器 */
.resizable-element {
  resize: both;
  /* 可选：若元素无需滚动条，用overflow: clip替代auto */
  overflow: auto;
}

/* 兜底覆盖方案（防止个别浏览器漏网） */
.resizable-element {
  position: relative;
}
.resizable-element::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px; /* 匹配自定义手柄尺寸 */
  height: 16px;
  background: transparent;
  z-index: 1;
}

关键说明 #

• WebKit/Blink内核：::-webkit-resizer伪元素隐藏原生手柄的方式在2024年仍稳定有效，覆盖绝大多数现代浏览器。
• Firefox：通过overflow: auto（或clip）配合resize属性，可自动隐藏原生右下角手柄；若元素原本需要滚动条，auto不会影响原有功能，若不需要滚动条，clip更合适。
• 兜底方案：用透明伪元素覆盖原生手柄区域，确保自定义手柄的交互优先级，避免原生手柄干扰。

注意事项 #

• 自定义手柄需设置高于伪元素的z-index，或直接放在元素内部，保证用户点击时触发自定义手柄的交互。
• 已在Chrome 120+、Firefox 120+、Safari 17+、Edge 120+版本验证生效。

内容的提问来源于stack exchange，提问作者silverdr