所选文本区域的自定义滚动条设计[重复]

问题描述 投票：0回答：1

这个问题在这里已有答案：

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

例如：

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

html css html5 css3
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.