如何设置textarea滚动条cursor为pointer手型且保留文本区输入光标

直接给textarea::-webkit-scrollbar设置cursor: pointer不生效，是因为Chrome、Edge、Safari等Webkit内核浏览器的滚动条由轨道、滑块、滚动按钮、边角等多个独立的伪元素组成，仅给最外层的滚动条容器设置光标样式，会被内部子元素的默认光标属性覆盖，最终只会在默认箭头、文本光标之间切换，达不到预期效果。

只需要给滚动条相关的所有伪元素统一设置手型光标，同时保留textarea本身的默认文本光标即可，完整代码如下：

textarea {
  height: 50px;
  width: 500px;
  /* 编辑区域保持默认文本输入光标 */
  cursor: text;
  overflow-y: auto;
}

/* 滚动条所有组成部分统一设置手型光标 */
textarea::-webkit-scrollbar,
textarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-corner {
  cursor: pointer;
}

对应的HTML结构不需要额外调整：

<textarea> 
asdasd <br> 
asdasd <br> 
asdasd <br> 
asdasd <br> 
asdasd <br> 
</textarea>

• 鼠标停在textarea文本编辑区域时，正常显示文本输入的I型光标，完全不影响编辑操作
• 鼠标停在滚动条的任意位置（包括轨道、滑块、上下滚动按钮、右下角边角）时，都会显示pointer手型图标

注意：以上方案仅适配Webkit内核浏览器，Firefox目前没有开放滚动条伪元素的光标自定义能力，暂无纯CSS的兼容实现方式。

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