更改 Angular 材料下拉列表和文本的默認 position

Question

我試圖將 Material 下拉面板的 position 更改為下拉按鈕的底部。 並嘗試將名稱和箭頭垂直居中到下拉區域。 請通過我試圖實現的圖像 go。

<div class="dropDown">
   <mat-select disableOptionCentering placeholder="Select any value">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>


.dropDown{
 width:200px;
 height:40px;
 background-color: white;
 text-align: center;
 border: 1px solid grey;
 vertical-align: middle;
 }

Answer 1

對於選擇框下方顯示的下拉菜單，將以下 css 引用添加到panelClass ：

.myPanelClass{
    margin: 25px 0px;
}

然后，為了使您的文本居中，請在 class 中引用以下 ZC7A62 class ：

.mySelectClass {
  padding-top: 12px;
}

然后將它們添加到 html 中

<div class="dropDown">
   <mat-select disableOptionCentering 
               placeholder="Select any value"
               panelClass="myPanelClass"
               class="mySelectClass">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>

這是一個有效的stackblitz