如何在 Angular 6 Material 中更改文本框占位符颜色

Question

Angular6material代码.

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

我想在输入元素获得焦点时更改默认颜色。

我已经厌倦了这个。

似乎没有任何效果。

Answer 1

如果我理解你的问题，这个 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;;
 }

希望有用。

Answer 2

对于 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;
}

对于下划线，我使用了轮廓样式的输入，但您可以更改使用的 class。

/* 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，但对我来说，这是目前唯一适用于特定组件的方法。

如何在 Angular 6 Material 中更改文本框占位符颜色

How to change text box placeholder color in Angular 6 Material

css

material-design

angular-material2

angular