1

How do I implement custom scroll design for a specific textarea in the major browsers?

eg:

Sample image for my scroll design:

Sample image for my scroll design

Community
  • 1
  • 1
krishna
  • 76
  • 7

1 Answers1

2

Below simple snippet is enough to give you custom scroll

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>
Shaik
  • 84
  • 1
  • 5