角材质下拉造型:在CSS中修剪左右两边

Question

我正在尝试获得角度材料选择，使之看起来像基本下拉。我们应用了disableOptionCentering，仍然可以看到下拉列表选项从左侧和右侧展开(见下面的图片)。理想的画面应该有左右两边的瘦身，该如何进行呢？

https://material.angular.io/components/select/overview

<h4>Basic mat-select</h4>
<mat-form-field appearance="outline">
  <mat-label>Favorite food</mat-label>
  <mat-select disableOptionCentering>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

当前的外观如下：

需要修剪左右两面，边缘/or填充物要适当垂直。

​

​

目标图片：

​

​

Answer 1

这是他们如何在材料设计的正式文档中实现的，但我想你可能需要为此得到一些css，因为它没有显示材料的样式。您只需添加您的自定义css风格，它的角度材料。

<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

您的问题也在这个线程How to show options under select (Angular material 7)?上得到了回答。