如何修改Angular Material Select下拉框的边框圆角与高度？

直接给你可行的解决方案：Angular Material的mat-form-field组件内部有独立的DOM结构，内联样式无法穿透到这些内部元素，得针对性修改目标元素的样式：

1. 边框圆角调整 #

需要修改mat-form-field内部的轮廓元素，包括常态和聚焦状态的轮廓：

/* 可放在组件CSS文件或全局styles.css中 */
.custom-form-field ::ng-deep .mat-form-field-outline {
  border-radius: 25px !important;
}

.custom-form-field ::ng-deep .mat-form-field-outline-thick {
  border-radius: 25px !important;
}

/* 可选：避免内容溢出圆角区域 */
.custom-form-field ::ng-deep .mat-form-field-wrapper {
  border-radius: 25px;
  overflow: hidden;
}

2. 高度调整 #

要修改表单域内部容器及选择器触发区域的高度与内边距，同时调整标签位置避免错位：

.custom-form-field ::ng-deep .mat-form-field-flex {
  height: 40px; /* 替换为你需要的高度，注意10px会导致内容显示异常，建议用合理数值 */
  align-items: center;
}

.custom-form-field ::ng-deep .mat-select-trigger {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

.custom-form-field ::ng-deep .mat-form-field-label-wrapper {
  top: -10px;
}

3. HTML代码修改 #

移除内联样式，添加自定义类：

<mat-form-field appearance="outline" class="custom-form-field">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" panelClass="select-style">
    <mat-option *ngFor="let topping of toppingList" [value]="topping">
      {{topping}}
    </mat-option>
  </mat-select>
</mat-form-field>

注意事项 #

• 若组件使用ViewEncapsulation.None，可去掉::ng-deep直接写样式；
• 在全局styles.css中写样式时，也无需::ng-deep，直接用类选择器即可；
• 高度设置过小（比如10px）会导致内容挤压变形，建议先设置合理数值再微调。

内容的提问来源于stack exchange，提问作者Ole