Angular Material输入框浏览器自动填充样式异常求助

问题根源 #

浏览器自动填充功能会注入私有伪类样式：Chrome用-webkit-autofill、Firefox用:-moz-autofill，这类样式优先级极高，常规选择器无法覆盖，导致输入框出现白色/黄色背景，破坏视频背景下的透明需求。

解决方案 #

通过覆盖浏览器私有伪类样式，结合Angular样式穿透确保生效：

1. 添加针对性CSS样式 #

如果是组件内样式，需用::ng-deep突破Angular Material的组件封装：

/* Chrome 自动填充样式覆盖 */
::ng-deep input:-webkit-autofill,
::ng-deep input:-webkit-autofill:hover,
::ng-deep input:-webkit-autofill:focus,
::ng-deep input:-webkit-autofill:active {
  /* 强制设置背景透明 */
  background-color: transparent !important;
  /* 覆盖Chrome内部模拟背景的阴影 */
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  /* 确保文本颜色继承原有样式 */
  -webkit-text-fill-color: inherit !important;
  /* 延迟自动填充样式生效（备选兜底方案） */
  transition: background-color 5000s ease-in-out 0s;
}

/* Firefox 自动填充样式覆盖 */
::ng-deep input:-moz-autofill,
::ng-deep input:-moz-autofill:hover,
::ng-deep input:-moz-autofill:focus,
::ng-deep input:-moz-autofill:active {
  background-color: transparent !important;
  color: inherit !important;
}

/* Firefox 预览态自动填充覆盖 */
::ng-deep input:-moz-autofill-preview {
  background-color: transparent !important;
  color: inherit !important;
}

2. 可选优化（避免自动填充触发） #

如果需要减少自动填充触发频率，可给input添加属性（不建议完全禁用，影响用户体验）：

<!-- 密码框用new-password，让浏览器识别为新密码字段 -->
<input matInput type="password" formControlName="password" required autocomplete="new-password"/>
<!-- 邮箱框用username，配合样式覆盖即可 -->
<input matInput type="email" formControlName="email" required autocomplete="username"/>

关键说明 #

• ::ng-deep：突破Angular组件的样式隔离，确保样式能作用到mat-input内部的原生input元素。
• !important：强制覆盖浏览器默认的高优先级伪类样式。
• -webkit-box-shadow：Chrome自动填充会用内部阴影模拟背景色，必须重置该属性才能实现真正透明。

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