How to display scroll bar in angular material mat-select on safari?

Question

This is a browser specific issue. In chrome, firefox and edge the scroll bar is displayed when there are more mat-options than the mat-select can display. The user knows there are more options because of the scroll bar. In safari however, the scroll bar only appears when the user scrolls down. This means the user might not be aware there are more mat-options in the mat-select. Here is some example code:

<mat-select>
  <mat-option>
    Option 1 
  </mat-option>
  <mat-option>
    Option 2 
  </mat-option>
  <mat-option>
    Option 3 
  </mat-option>
  <mat-option>
    Option 4 
  </mat-option>
  <mat-option>
    Option 5 
  </mat-option>
  <mat-option>
    Option 6 
  </mat-option>
</mat-select>

How can i force the scroll bar to be displayed always on safari like the other browsers? The user might not know Option 6 exists otherwise in the example above.

Answer 1

Try to forcefully show it on hover

::-webkit-scrollbar {
    width: 10px;
}

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

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