css - 使用 mat-form-field 更改特定字段中的背景颜色

Question

所以，我有一个现有的 mat-form-field，我想更改特定字段的背景颜色。我已经在 css 中尝试过这段代码，但它改变了我表单中所有字段的背景颜色：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    background-color: lightgray !important;
    border-radius: 5px;  
}

这是我的 mat-form-field 的代码：

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" class="width-1">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

标签： cssangularinputbackground-colormat-form-field

Answer 1

更新了工作示例

您可以通过提供 id 或类来更改将任何 CSS 应用于特定元素。

这是使用它的代码Class

::ng-deep .mat-form-field-appearance-outline.specific-border .mat-form-field-outline  {
    background-color: lightgray !important;
    border-radius: 5px;  
}

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" class="width-1 specific-border">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

这是使用它的代码Id

::ng-deep .mat-form-field-appearance-outline#specific-border .mat-form-field-outline  {
    background-color: lightgray !important;
    border-radius: 5px;  
}

<mat-label>Filing Time</mat-label><br />
              <mat-form-field appearance="outline" id="specific-border" class="width-1">
                <input
                  matInput
                  readonly
                  formControlName="filingTime"
                  [ngModel]="filingDate | date: 'HH:mm'"
                />
              </mat-form-field>

演示 Stackbiltz