更改角度材质下拉菜单和文本的默认位置

Question

我正在尝试将“材料”下拉面板的位置更改为下拉按钮的底部。并尝试将名称和箭头垂直居中放置在下拉区域中。 请仔细阅读我要实现的图像。

<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

对于选择框下方显示的下拉列表，请在panelClass中添加以下CSS的引用：

.myPanelClass{
    margin: 25px 0px;
}

然后，为了使文本居中，请在class中引用以下CSS：

.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