如何自定义textarea滚动条且不影响其尺寸调整器？

当你给textarea设置自定义滚动条样式后，右下角的尺寸调整器会因为继承滚动条的宽高设置而变小。要解决这个问题，只需单独为尺寸调整器设置样式，覆盖滚动条带来的影响即可。

完整示例代码 #

/* 自定义滚动条核心样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* 滚动条轨道样式（可选，优化视觉） */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 滚动条滑块样式（可选，优化视觉） */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

/* 重置textarea尺寸调整器样式，避免被滚动条影响 */
textarea::-webkit-resizer {
  background-color: #f1f1f1;
  border: 2px solid #888;
  border-top-left-radius: 3px;
}

<textarea></textarea>

关键说明 #

• WebKit内核浏览器中，textarea的尺寸调整器对应伪元素::-webkit-resizer，它默认会继承::-webkit-scrollbar的样式规则，导致尺寸缩小。
• 单独为这个伪元素设置背景、边框等样式，就能还原调整器的正常大小，同时保留你自定义的滚动条效果。你可以根据自己的UI风格调整颜色、圆角等参数，让调整器和滚动条视觉统一。

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