角材料样式

Question

我似乎可以使用CSS在mat-option字段上设置滚动条样式。我想使滚动条具有不同的大小和颜色。任何帮助或指示，将不胜感激。

我尝试在下面执行此操作，但是没有用。

How to change the scrollbar styles in Angular Material select?

WA

Answer 1

要将样式应用于自动完成面板，只需在自动完成元素中添加一个类。参见有关“类” @Input的文档：https://material.angular.io/components/autocomplete/api#MatAutocomplete。

例如：

<mat-autocomplete class="custom-scroll" #auto="matAutocomplete" [displayWith]="displayFn">

然后在您的全局 scss中：

.custom-scroll.mat-autocomplete-panel {

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: green;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: blue;
    }
}