typescript - วิธีเปลี่ยนสไตล์แถบเลื่อนใน Angular Material select?

เราต้องการความช่วยเหลือในการเปลี่ยนแถบเลื่อนในคอมโพเนนต์ Select ของ Angular Material

การสาธิตต่อไปนี้ถูกนำไปใช้งานแล้ว

https://stackblitz.com/angular/bxbvndrpogl?file=app%2Fselect-reset-example.ts

อย่างไรก็ตาม ฉันต้องการความช่วยเหลือในการเปลี่ยนความกว้างและสไตล์ของแถบเลื่อน

ตัวอย่าง

คำตอบ #1

โดยปกติวิธีการปรับแต่งการเลื่อนคือ:

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}

คุณไม่สามารถตรวจสอบการเลื่อนโดยตรงจากเครื่องมือสำหรับนักพัฒนาได้ แต่คุณสามารถดูสไตล์ของมันได้หากคุณตรวจสอบ div ที่มีคุณสมบัติ overflow โดยมีค่า scroll; อยู่ในนั้น

คำตอบ #2

เพื่อเปลี่ยนสีและความกว้าง มันใช้ได้กับฉัน -

::-webkit-scrollbar {
    width: 4px;
    overflow-y: scroll;
    background: grey;
    box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 10px;
}

คำตอบ #3

ฉันหวังว่าฉันจะไม่มาสาย ฉันมีปัญหาคล้ายกันกับแถบเลื่อนพื้นเมือง

วิธีที่ฉันจะแก้ปัญหานี้คือการใช้ไลบรารี Simple bar แล้วฉันจะสร้างคำสั่งและห่อหุ้มเฉพาะ

 <mat-select placeholder="State">
    <div appSimpleBar>
       <mat-option>None</mat-option>
       <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
    </div>
  </mat-select>

นี่จะช่วยซ่อนแถบเลื่อนพื้นฐาน