如何移除Angular Material 16表单字段的悬停与聚焦颜色？

你的只读mat-form-field已经设置了基础透明背景，但Angular Material的filled样式在悬停和聚焦状态下会自带背景变化样式，需要针对性覆盖这两个状态的CSS规则：

.my-light-field {
  .mdc-text-field--filled {
    background-color: transparent !important;
    /* 可选：移除聚焦时的下划线波纹效果（如果不需要） */
    .mdc-line-ripple {
      display: none;
    }
  }

  /* 覆盖悬停状态的背景 */
  .mdc-text-field--filled:hover {
    background-color: transparent !important;
  }

  /* 覆盖聚焦状态的背景 */
  .mdc-text-field--filled:focus-within {
    background-color: transparent !important;
  }
}

补充说明 #

因为你的输入框是readonly状态，如果不需要用户触发任何交互（包括悬停、点击），可以额外添加pointer-events: none到.mdc-text-field--filled，彻底屏蔽交互状态：

.my-light-field .mdc-text-field--filled {
  pointer-events: none;
}

这样既可以避免背景变化，也能让输入框完全不响应鼠标操作，更符合只读字段的静态展示需求。

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