Angular Material输入框选择自动填充建议选项时出现白色背景问题

问题原因 #

该问题是浏览器自带的自动补全（autocomplete）功能的默认伪类样式，与你当前项目的输入框样式（如果使用了Angular Material则是Material主题样式）优先级冲突导致的，和Mac开发环境、Angular核心框架本身无关。

解决方案 #

方案1：不需要自动补全功能，直接关闭

给对应的input标签添加autocomplete="off"属性即可，示例如下：

<!-- 普通Angular输入框 -->
<input type="text" autocomplete="off">

<!-- Angular Material输入框 -->
<mat-form-field>
  <input matInput type="text" autocomplete="off">
</mat-form-field>

方案2：需要保留自动补全功能，覆盖浏览器默认样式

在全局样式文件（一般是styles.scss/styles.css）中加入以下代码，根据你自己的设计规范替换对应色值即可：

/* 覆盖自动填充后的输入框样式（包含hover、聚焦、选中状态） */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
  /* 第一个参数是内阴影大小不需要改，后面的色值替换为你的输入框默认背景色 */
  -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;
  /* 色值替换为你的输入框默认文字颜色 */
  -webkit-text-fill-color: #212121 !important;
}

/* 覆盖自动补全建议项选中状态的背景色 */
input:-internal-autofill-selected {
  /* 色值替换为你需要的选中背景色 */
  background-color: #e0e0e0 !important;
}

如果仅需要在单个组件内生效，可以把上述代码放到组件对应的样式文件中，在每个选择器前加上::ng-deep即可，建议同时给输入框加自定义类名限制样式作用范围，避免全局污染。

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