Mat-Select 如何去掉小缩放答案

【问题标题】：Mat-Select how to remove the little zoomMat-Select 如何去掉小缩放
【发布时间】：2021-12-18 20:25:18
【问题描述】：

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

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

正如您在上面的 stackblitz 链接中看到的那样，当您开始单击输入字段时，顶部会出现一个列表，并且有一个小凸起来强调选择项。如何使用 CSS 消除这个凹凸？

在材料支持或其他地方没有找到任何东西。

我认为 cdk-overlay-0 类中有一些需要更改的地方，但我不知道是什么。

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

【问题讨论】：

标签： angular angular-material mat-select

【解决方案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>

使用自动完成功能，我可以创建一个没有任何凹凸的列表，此外您还有一个可搜索的列表:)

【讨论】：