Customize the Browser’s Scrollbar only with CSS

-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

  1. ::-webkit-scrollbar the background of the bar itself.
  2. ::-webkit-scrollbar-button the directional buttons on the scrollbar.
  3. ::-webkit-scrollbar-track the empty space “below” the progress bar.
  4. ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
  5. ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.
  6. ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.
  7. ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.