De-emphasize Scrollbars with CSS: `scrollbar-color` and `scrollbar-width`

Do you have a small scrollable container, such as within a popover, where you want to make the scrollbar less prominent? CSS properties scrollbar-color and scrollbar-width offer an elegant solution for de-emphasizing scrollbars.

The scrollbar-color property allows you to define the colors for both the scrollbar's thumb (the draggable part) and its track (the non-draggable part). For instance, setting it to lightgray transparent would make the thumb light gray and the track fully transparent, blending it seamlessly into the background.

Complementing this, the scrollbar-width property controls the thickness of the scrollbar. By setting it to thin, you can achieve a more subtle and less intrusive appearance, perfect for compact UI elements.

Here's an example demonstrating these properties:

select {
  scrollbar-color: lightgray transparent;
  scrollbar-width: thin;
}

See a live demonstration of scrollbar styling in action: