答案：HTML滚动条样式可用于textarea，通过::-webkit-scrollbar伪元素可自定义滑块、轨道等部分，适用于Chrome、Edge、Safari等Webkit内核浏览器，示例代码展示了如何设置宽度、背景、圆角及悬停效果，但需注意Firefox不支持该特性，需通过JavaScript模拟实现兼容性处理。
可以，HTML滚动条样式完全可以用在textarea上。虽然textarea是表单元素，但它的内容溢出时会自动出现滚动条，这个滚动条和其他可滚动容器（如div）一样，可以通过CSS来自定义样式，尤其是在Webkit内核浏览器（如Chrome、Edge、Safari）中支持良好。
textarea滚动条自定义方法
通过CSS的::-webkit-scrollbar伪元素，你可以针对textarea中的滚动条进行样式设置。以下是常用样式规则：
基本结构示例：
::-webkit-scrollbar 相关伪元素
这些伪元素用于精准控制滚动条的各个部分：
立即学习“前端免费学习笔记（深入）”；
- ::-webkit-scrollbar：整个滚动条的轨道
- ::-webkit-scrollbar-thumb：可拖动的滑块部分
- ::-webkit-scrollbar-track：滚动条的背景轨道
- ::-webkit-scrollbar-button：滚动条两端的按钮（上下箭头，一般隐藏）
- ::-webkit-scrollbar-corner：横向和竖向滚动条交汇的角落
CSS样式示例
.custom-scroll {
width: 300px;
height: 150px;
padding: 10px;
resize: vertical; /* 允许用户调整高度 */
border: 1px solid #ccc;
font-size: 14px;
}
/ 整个滚动条 /
.custom-scroll::-webkit-scrollbar {
width: 10px; / 竖向滚动条宽度 /
height: 10px; / 横向滚动条高度（如果需要） /
}
/ 滚动条轨道 /
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 8px;
}
/ 滑块部分 /
.custom-scroll::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 8px;
border: 2px solid #f1f1f1;
}
/ 鼠标悬停时的滑块 /
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
兼容性说明
需要注意的是，::-webkit-scrollbar仅在基于WebKit/Blink的浏览器中有效（如Chrome、Edge、Safari）。Firefox 和部分旧版本浏览器不支持该特性。
如果你需要在Firefox中实现类似效果，目前只能通过外部包裹容器 + JavaScript模拟滚动等方式间接实现，原生不支持自定义滚动条样式。
基本上就这些，只要目标浏览器支持，给textarea加好看的滚动条并不复杂，关键是掌握伪元素的使用方式。实际开发中建议加上必要的兼容性处理或降级显示。
