Css 如何以Angular 调整下拉控件的高度

更新

try 在下面的政务司司长中将top的值更改为负值，并try 解决此问题！Stackblitz是错误的，但它演示了如何调整文本以适应容器！

.frequency-dimensions {
  border: 1px solid black; // you can ignore this one line!
  height: 28px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
  position: relative;
  width: 100px !important;
}

.frequency-dimensions .mat-mdc-select-trigger {
  position: absolute;
  top:-2px;
}

Stackblitz Demo个

下面的CSS似乎可以完成这项工作！但我用了mat-form-field，因为你有你的形象轮廓！

政务司司长

.form-field-custom {
  display: flex !important;
  height: 33px !important;
}

.form-field-custom .mat-mdc-text-field-wrapper {
  height: inherit !important;
}

.form-field-custom .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
  height: inherit !important;
  display: flex !important;
}

.form-field-custom .mat-mdc-form-field-infix {
  padding: 0 !important;
  width: 100%;
  height: inherit;
  display: flex;
}
.frequency-dimensions {
  height: 33px !important;
  vertical-align: middle;
  display: flex !important;
  align-items: center;
}

HTML

<mat-form-field appearance="outline" class="form-field-custom">
  <mat-select
    class="frequency-dimensions"
    formControlName="frequency"
    (change)="disableSubmitButton=false"
    disableOptionCentering
    panelClass="custom-panel-frequency"
  >
    <mat-option value="daily" selected>Daily</mat-option>
    <mat-option value="total">Total</mat-option>
  </mat-select>
</mat-form-field>

Stackblitz Demo