JSFiddle - React, Tailwind, and code Playground

by fidian

HTML

<textarea class="styled pointer" rows="5" cols="20">
Fancy.
The mouse cursor on the scrollbar uses "text" instead of "pointer".


</textarea>

<textarea class="" rows="5" cols="20">
Not fancy.
The mouse cursor on the scrollbar uses "pointer".


</textarea>

CSS

textarea {
  resize: none;
}

.styled::-webkit-scrollbar {
  /* Setting the width triggers the custom scrollbar*/
  width: 15px;
}

.styled::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, teal, aqua, aqua, teal);
  border-radius: 7.5px;
}

.pointer::-webkit-scrollbar {
  /* Cursor is ignored */
  cursor: pointer !important;
}