Mat-Select 如何去除小缩放

Question

我正在使用 angular material 中的 mat-select，我想在输入 select 项目时禁用小缩放效果 ?

https://stackblitz.com/edit/angular-mat-select-example

正如您在上面的 stackblitz link 中看到的那样，当您开始单击输入字段时，会出现一种位于顶部的列表，并且有一个小凸起来强调 select离子项目。我怎样才能用 CSS 去除这个颠簸？

在 material 支持和其他地方都没有找到任何东西。

我认为 class cdk-overlay-0 中有一些东西需要改变，但我不知道是什么。

最后，我希望我的 Mat-select 表现如下： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select

Answer 1

我终于通过改变策略解决了。我没有使用 mat-select，而是使用带有一些自定义功能的自动完成功能

<form class="example-form">
 <input type="text" class="input" (change)="control()" placeholder=" {{options[selectedId].name}}" [formControl]="myControl" #trigger="matAutocompleteTrigger" [matAutocomplete]="auto" (click)="reset( trigger, auto)">
 <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name" (click)="selected(option.id)">
      {{option.name}}
    </mat-option>
 </mat-autocomplete>
</form>

有了自动完成功能，我可以创建一个没有任何障碍的列表，此外你还有一个可搜索的列表:)

Mat-Select 如何去除小缩放

Mat-Select how to remove the little zoom

angular-material

angular

mat-select