Как я могу настроить поле формы мат в отключенном состоянии

Question

Я пытаюсь настроить поле mat-form углового материала: я смог настроить границу подчеркивания, используя:

::ng-deep.mat-form-field-ripple {
  background-color: yellow;
}

Теперь я пытаюсь настроить линию подчеркивания в отключенном состоянии, чтобы она была сплошной, а не пунктирной линией:

Я попробовал это, но это не сработало для подчеркивания:

::ng-deep.mat-form-field-disabled
 {

 }

Я хочу, чтобы это было серым цветом в отключенном состоянии

 <mat-form-field>
    <input matInput placeholder="Input" [disabled]='true'>
  </mat-form-field>

Answer 1

Это исправлено:

 ::ng-deep.mat-form-field-disabled .mat-form-field-underline 
    { 
    background-image: linear-gradient( to right, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 0.42) 33%, #c2c7cc 0 ) !important; 
    background-size: 1px 100% !important;
     background-repeat: repeat-x !important; 
    } 

Answer 2

Вам нужно нацелиться на следующий класс:-

.mat-form-field-disabled .mat-form-field-underline

CSS, который вы хотите изменить:

background-image: linear-gradient(to right,rgba(0,0,0,1) 0,rgba(0,0,0,.42) 33%,transparent 0);
background-size: 4px 100%;
background-repeat: repeat-x;

Так что вы можете либо unset: all и начать с нового или обновить background-size: 1px 100%; или что угодно для ваших нужд

Answer 3

Можешь попробовать

      ::ng-deep .mat-form-field-disabled {
   .mat-input-element {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-label {
        color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-underline {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-ripple {
         color: rgba(0, 0, 0, 0.14);
    }
    .mat-form-field-required-marker {
         color: rgba(0, 0, 0, 0.14);
    }

Answer 4

Это исправило это:

    ::ng-deep.mat-form-field-disabled .mat-form-field-underline {
    background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 0.42) 33%,
    #c2c7cc 0
  ) !important;
  background-size: 1px 100% !important;
  background-repeat: repeat-x !important;
}

Answer 5

Вам не нужен линейный градиент в фоновом изображении. Это сработало для меня:

      ::ng-deep .mat-form-field-disabled .mat-form-field-underline {
  background-color: #949494 !important;
  background-size: 1px 100% !important;
  background-repeat: repeat-x !important;
}

Answer 6

      ::ng-deep .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline,
    .mat-input-element:disabled {
        color: red;

    }

это сделало работу за меня, чтобы раскрасить текст и границы.