如何覆盖HTML5输入框自动补全选中项的默认样式？

我已经很久没处理这类问题了，如今不同浏览器间存在一些兼容性问题。请问怎么移除<input type="email" />选择自动补全结果时的所有默认样式？

在Safari中显示如下（注：我的应用里没有任何黄色或绿色样式）：

在Chrome中显示如下（带有蓝色背景，且用了我没在CSS里指定的字体，注意选中前文本偏小且无样式）：

我想控制这些样式，目前希望所有场景下背景为白色，文本在所有状态下样式一致（仅占位符用浅灰色文本即可）。

我试过设置input:focus::placeholder {}，但对当前问题无效；也尝试了input:active（我以为这是选择自动补全值时的状态），同样没用。有没有什么解决思路？

以下是我的完整输入框代码，供参考：

<input id="email" name="email" type="email" required="" autocapitalize="off" autocorrect="off" placeholder="Your best email" style="min-width: 100%;" data-gtm-form-interact-field-id="0">

我不知道data-gtm-form-interact-field-id来自哪里，这是我从网页检查器里复制的outerHTML。

更新 #

根据建议尝试了:autofill相关样式，代码如下：

input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: var(--color-base-background) !important;
  color: fieldtext !important;
}

input:-webkit-autofill::first-line {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

input:auto-fill {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

input:-webkit-autofill {
  background: var(--color-base-background);
  font-family: 'Noto Sans Mono';
  font-size: 16px;
}

但字体样式仍然不生效……这似乎是浏览器的一个已知问题。

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