Css 如何更改Angular 6材质中的文本框占位符颜色

角度6材料代码。

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

我想在输入元素聚焦时更改默认颜色

我已经累了

---

似乎什么都不管用。

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

---

希望它有用

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

---

希望它有用

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

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

是的，谢谢..部分有效..标签颜色已更改。文本框下划线未更改。是否在选择时也更改下划线颜色？下划线颜色永久显示在文本框上。只有在聚焦时才应用颜色。请检查这一点，它的工作如预期。但代码只有在我删除：：ng deep prefix之后才起作用。我用的是铬。我不想要初始文本框的蓝色下划线。所以我只使用了第1、3种风格。我跳过了第二种风格。非常感谢你。请你删除：：ng deep。我也在stackblitz退房了。看到了吗？是的，谢谢。部分有效。标签颜色已更改。文本框下划线未更改。是否在选择时也更改下划线颜色？下划线颜色永久显示在文本框上。只有在聚焦时才应用颜色。请检查这一点，它的工作如预期。但代码只有在我删除：：ng deep prefix之后才起作用。我用的是铬。我不想要初始文本框的蓝色下划线。所以我只使用了第1、3种风格。我跳过了第二种风格。非常感谢你。请你删除：：ng deep。我也在stackblitz退房了。看到这个了吗