Как изменить цвет заполнителя текстового поля в Angular 6 Material

Question

Угловой 6 код материала.

<mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

Я хотел изменить цвет по умолчанию, когда входной элемент сфокусирован.

Я уже устал от этого. Как изменить цвет заполнителя md-input-container с помощью CSS в угловом материале

Ничто не похоже на работу.

Answer 1

Для Angular 7 и Material 7 это сработало для меня:

/* Placeholder overrides */
:host ::ng-deep input::-webkit-input-placeholder {
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input:-moz-placeholder { /* Firefox 18- */
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input::-moz-placeholder {  /* Firefox 19+ */
    color: rgba(255,255,255, 0.7) !important;
}

:host ::ng-deep input:-ms-input-placeholder {
    color: rgba(255,255,255, 0.7) !important;
}

Для подчеркивания я использовал ввод в виде структуры, но вы можете просто изменить используемый класс.

/* Appearance around each input/button to remove faded outline 
but put the dark hover back in */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: transparent !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: rgba(255, 255, 255, 0.87) !important;
}

Хотя я не думаю, что это лучший способ сделать это, особенно с использованием :: ng-deep, это единственное, что работает сейчас для определенного компонента, для меня.

Answer 2

Если я понимаю ваш вопрос, этот css должен работать.

  .mat-focused .mat-form-field-label {
      /*change color of label*/
      color: red !important;
  }

 .mat-form-field-underline {
   /*change color of underline*/
    background-color: blue !important;
 } 

.mat-form-field-ripple {
   /*change color of underline when focused*/
   background-color: yellow !important;;
 } 

Надеюсь, это было полезно.