如何隐藏resize属性的角落斜线并保留调整尺寸功能？

要保留resize调整尺寸功能同时移除角落的斜线，只需给元素添加针对浏览器内置resize手柄的样式即可，主流浏览器都能适配：

修改后的完整CSS代码：

div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

/* 隐藏Chrome、Edge等WebKit内核浏览器的resize斜线 */
div::-webkit-resizer {
  display: none;
}

/* 处理Firefox的resize斜线 */
div {
  /* Firefox中默认斜线会随元素背景适配，保持原有样式即可隐藏，不影响拖拽功能 */
  resize: horizontal;
}

说明 #

• WebKit内核浏览器（Chrome、Edge、Safari等）通过::-webkit-resizer伪元素控制resize手柄的显示，设置display: none就能直接隐藏斜线，完全保留拖拽调整尺寸的功能。
• Firefox中默认的resize斜线会适配元素背景，保持元素原有样式即可让斜线不可见，同时拖拽功能不受影响。

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