时间戳

首页 > 解决方案 > 更改禁用材质填充输入的背景

css - 更改禁用材质填充输入的背景

问题描述

使用 Angular Material 我可以改变这个填充垫输入的背景：

<mat-form-field>
  <mat-label>Tax-number</mat-label>
  <input type="text" matInput [id]="'taxnumber'" [formControl]="controlContainer.control.controls['taxnumber']">
  <mat-error>{{controlContainer.control.controls['taxnumber'].errors | bsErrorMessage}}</mat-error>
</mat-form-field>

我可以使用以下 css 更改背景：

.mat-form-field-appearance-fill
.mat-form-field-flex {
    background: rgba(255, 255, 255, 1);
}

现在我想在禁用时更改控件的背景。我最好的猜测是

.mat-form-field-appearance-fill:disabled
.mat-form-field-flex:disabled {
    background: rgba(255, 15, 15, 1);
}

但这不起作用。那么如何更改禁用的角度材质填充输入的背景呢？

我为这个问题创建了一个 stackblitz： https ://stackblitz.com/edit/angular-bcqsjo

标签： cssangular-material

解决方案

查看您的 stackblitz 链接，我刚刚打开了 chrome 开发工具并检查了禁用的字段。这是正在应用的css：

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background-color: rgba(0,0,0,.02);
}

所以父级上有一个附加类（mat-form-field-disabled）。您更新的代码将是：

.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
    background: rgba(255, 255, 255, 1);
}

推荐阅读