Angular 4中如何修改md-input-container聚焦时占位符（转标签）的颜色？

嘿，我来帮你搞定这个问题！在Angular 4的Material组件里，当输入框有内容时，占位符会转换成浮动标签，要修改它的颜色，得针对Material组件的特定CSS类来定制——毕竟这些组件自带样式封装，直接写普通样式可能穿透不进去。

你的代码里已经给md-input-container加了data_font类，这太方便了，我们可以用这个类来限定样式的作用范围，避免不小心影响到其他输入框。

方法一：在组件CSS文件中修改（推荐，精准控制） #

Angular组件的样式默认是封装隔离的，所以需要用::ng-deep来穿透这个封装，才能修改Material内部组件的样式。你可以在对应组件的.component.css文件中添加以下代码：

/* 未输入内容时，默认占位符的颜色 */
::ng-deep .data_font .mat-form-field-label {
  color: #666;
}

/* 输入内容后，浮动标签的颜色（这就是你要的状态） */
::ng-deep .data_font .mat-form-field-label.mat-form-field-should-float {
  color: #2196F3; /* 替换成你想要的颜色，比如这里的蓝色 */
}

/* 可选：修改输入框聚焦时标签的颜色 */
::ng-deep .data_font .mat-form-field.mat-focused .mat-form-field-label {
  color: #1976D2;
}

方法二：在全局样式文件中修改 #

如果你希望这个样式作用于整个应用中所有带data_font类的输入框，可以直接在项目根目录的styles.css（或styles.scss）里写，不需要加::ng-deep：

/* 输入内容后浮动标签的颜色 */
.data_font .mat-form-field-label.mat-form-field-should-float {
  color: #2196F3;
}

关键说明 #

• mat-form-field-should-float是Angular Material用来标记标签处于浮动状态的类，只要输入框有内容或者被聚焦，这个类就会自动添加到标签上。
• 用自定义类data_font包裹选择器是非常重要的，这样只会修改你指定的输入框，不会全局污染所有md-input-container的样式。

这样设置后，当你在输入框中输入内容，占位符转换成浮动标签时，颜色就会变成你想要的啦！

内容的提问来源于stack exchange，提问作者fariba.j