Question

如何在主流浏览器中为特定的textarea实现自定义滚动设计？

例如：

我的滚动设计的示例图像：

Sample image for my scroll design

Answer 1

下面的简单代码片段足以为您提供自定义滚动

textarea::-webkit-scrollbar {
    width: 12px;
}
textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

<html>

<body>
  <textarea cols="40" rows="3" wrap="off" >
     Hello
     Hai
     Hell
     World
     Hai
     HHHH
  </textarea>
</body>

</html>

选定文本区域的自定义滚动条设计

1 个答案: