Angular/Material中mat-form-field输入框自定义样式问题

针对你提到的两个需求，我来帮你一步步调整，结合你的现有代码给出具体修改方案：

1. 修改输入框选中后的下划线颜色 #

你当前已经用了 /deep/ 来修改未选中状态的下划线，但要注意Angular中 /deep/ 已被弃用，推荐使用 ::ng-deep 来穿透组件样式隔离。选中状态的下划线需要匹配 .mat-input-underline.mat-focused 这个类组合：

/* 修改输入文本颜色 */
.toolbar-search, mat-placeholder {
  color: white;
}

/* 修改输入框未选中时的下划线颜色 */
::ng-deep .mat-input-underline {
  background-color: white;
}

/* 修改输入框选中后的下划线颜色 */
::ng-deep .mat-input-underline.mat-focused {
  background-color: #1976d2; /* 替换成你想要的目标颜色即可 */
}

2. 移除浮动标签（处理弃用的mat-placeholder） #

首先要说明：mat-placeholder 确实已经被Angular Material弃用，现在推荐使用 mat-label 替代。要移除浮动标签，有两种简单的方式：

方式一：通过组件属性直接禁用浮动 #

修改你的HTML代码，把 mat-placeholder 换成 mat-label，然后给 mat-form-field 添加 floatLabel="never" 属性，这样标签就不会浮动了：

<form class="search-form">
  <mat-form-field class="example-full-width" floatLabel="never">
    <input class="toolbar-search" type="text" matInput>
    <mat-label>Search</mat-label>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

方式二：完全隐藏标签（包括初始占位状态） #

如果你连初始的占位符文本都不想显示，可以直接移除标签组件，给 matInput 添加原生的 placeholder 属性：

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput placeholder="Search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

补充：旧版本兼容（暂不替换mat-placeholder的情况） #

如果暂时无法升级写法，也可以通过样式强制隐藏浮动状态的占位符：

::ng-deep .mat-input-placeholder.mat-float {
  display: none !important;
}

不过还是建议尽快切换到 mat-label 的写法，避免后续版本的兼容性问题。

内容的提问来源于stack exchange，提问作者physicsboy