如何设置textarea的::-webkit-scrollbar-corner以去除暗模式下的白色边角

你可以通过给::-webkit-scrollbar-corner设置与textarea背景一致的背景色+同色边框的方式覆盖默认白色边角，不需要自定义::-webkit-resizer样式，也不用额外添加外层容器，原生的调整控件斜线标识会完整保留。

原理说明 #

Webkit/Blink内核默认会给::-webkit-scrollbar-corner添加浅色默认边框，仅修改背景色时边框仍然为白色，就是你截图中白色边角的来源，将边框颜色设置为和暗模式背景同色即可完全隐藏该白色边框。

完整可运行代码示例 #

/* 仅作用于textarea，避免污染全局滚动条样式 */
textarea::-webkit-scrollbar-corner {
  background-color: #000;
  /* 核心配置：覆盖默认白色边框 */
  border-color: #000;
  /* 若仍有边框残留可加下一行代码强制覆盖 */
  /* box-shadow: inset 0 0 0 10px #000; */
}

textarea::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #1a1a1a; /* 暗模式滚动条背景，可按需调整 */
}

/* 可选：滚动条滑块暗模式适配，不需要可删除 */
textarea::-webkit-scrollbar-thumb {
  background-color: #444;
  border-radius: 6px;
}

textarea {
  background-color: #000;
  color: #fff;
  resize: both; /* 保留原生调整大小功能 */
}

<textarea>
  Hello







  World
</textarea>

兼容性说明 #

该方案仅针对Webkit/Blink内核浏览器（Chrome、新版Edge、Safari等）生效，不支持IE、旧版Edge、Firefox，和你之前了解的兼容性范围一致。

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