Search code examples
cssvue.jswebwebkit

Styling the default scrollbar in Vue

I'm attempting to style the thumb of the default scrollbar in vue (black background so no way of seeing the default currently) I've tried all of the following and there's been no difference

 main::-webkit-scrollbar-thumb {
  border-radius: 2px;
  /* background-color: rgba(0,0,0,.5); */
  background-color: #00FF01;
  color: #00FF01;
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
body::-webkit-scrollbar-thumb {
   border-radius: 2px;
  /* background-color: rgba(0,0,0,.5); */
  background-color: #00FF01;
  color: #00FF01;
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
::-webkit-scrollbar-thumb {
   border-radius: 2px;
  /* background-color: rgba(0,0,0,.5); */
  background-color: #00FF01;
  color: #00FF01;
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Is the implementation of webkit different?

Solution

  • all of the ::webkit-scrollbar-* pseudo-elements can only work if at least 1 CSS attribute is defined in the "entire scrollbar" pseudo-element ::webkit-scrollbar

    Try them together:

    ::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-thumb {
   border-radius: 2px;
  /* background-color: rgba(0,0,0,.5); */
  background-color: #00FF01;
  color: #00FF01;
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}