Изменить фон ввода данных отключенного материала - PullRequest
Новая
       1

Изменить фон ввода данных отключенного материала

0 голосов
/ 26 октября 2019

Используя угловой материал, я могу изменить фон этой заливки matInput: 

<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);
}

Но это не работает. Так как же вместо этого изменить фон отключенного ввода углового материала?

Я создал стек для этой задачи: https://stackblitz.com/edit/angular-bcqsjo

1 Ответ

1 голос
/ 27 октября 2019

Проверяя вашу ссылку на стек, я только что открыл chrome dev tools и осмотрел отключенное поле. Вот применяемый 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);
}
...