如何在 select 中將占位符文本向右移動幾個像素？

Question

我已經堅持了幾個小時試圖：

1. 在我的 select 組件中將占位符文本（搜索）向右移動 10 個像素，然后
2. 降低字段的高度（可能減少 5px），但到目前為止還沒有運氣。

誰能指出我正確的方向？ 提前非常感謝：這是我的代碼：

現場演示

<mat-form-field [floatLabel]="'never'">
  <mat-label>Select</mat-label>
  <mat-select disableOptionCentering
    panelClass="my-mat-select-container">
    <mat-option *ngFor="let food of foods" [value]="food.value">
  {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

實際上，您需要覆蓋 angular 材質樣式類來實現自定義樣式。

我在這里做了一點，請把 styles.scss 中的 css 類放在下面，看看你是否得到了你所期望的。
隨意使用像素來調整標簽。

// dropdown label 
.mat-form-field-label {
  padding-left: 10px;
}

// dropdown label 
.mat-form-field-flex {
  padding-top: 6px!important;
}

// dropdown label 
.mat-form-field-appearance-fill .mat-form-field-infix {
    padding-bottom: 6px!important;
}

// dropdown options style
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
    height: 38px!important;
}

// dropdown options style
.mat-select-panel .mat-option {
    padding-left: 25px !important;
}

// selected value text style
.mat-select-value-text {
   padding-left: 10px !important;
}

注意：為避免使用導入，您必須提供更明確的 CSS 句柄。 例如對於以下代碼

<custom-directive>
   <mat-label >Select</mat-label>
</custom-directive>

，您應該將 css 指令寫為：

custom-directive mat-label {
  // css here
}

您可以使用 chrome 的檢查元素功能來了解正確的 CSS 處理程序，下面是示例圖像。

Stackblitz 代碼： https://stackblitz.com/edit/angular-fjy4y5-r8urqh?file=src/styles.scss

Answer 2

您可以通過添加填充來移動占位符文本，如下所示

::ng-deep .mat-form-field-label-wrapper label mat-label {
  padding-left: 10px;
}

並為高度嘗試

::ng-deep mat-form-field .mat-form-field-wrapper .mat-form-field-flex {
  height: 50px;
}