Search code examples
cssangularangular-material

Rounded Corners for Scrollbar in Angular with webkit-scrollbar-button

I am using Angular, Angular Material and CSS

I am having a mat-select Dropdown and it looks like below.

Dropdown Panel Scrollbar

I came to know that we can achieve the Rounded corners on all sides of the Dropdown panel with webkit-scrollbar

I am struggling to achieve this...Can anyone point me out in the right direction?

Along with this, how can I use panelClass of Angular Material 14 to make the Dropdown panel not overlapping with the Dropdown Textbox.

I am able to achieve Rounded Top Right Corner with the below code..

.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:increment {
    overflow: visible !important;
    border-radius: 4px 4px 4px 4px !important;
}

But for Bottom Right Corner is not coming as Rounded.

EDIT

The below solution particularly applies for my only control instead of applying for the whole project..

.custom-panel-siteId::-webkit-scrollbar {
  border-radius: 5px;
}

.custom-panel-siteId::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.custom-panel-siteId::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

Is it possible to apply only the rounded corner instead of modifying the styles of the scrollbar thumb and track?

Any help would be greatly appreciated.

Solution

  • You can do by customizing the scrollbar, but note, this will affect all scrollbars in your application, better not to do, else go for my previous answer!

    ::-webkit-scrollbar {
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.custom-panel-frequency {
  border-radius: 5px !important;
}

    Stackblitz Demo