vuetify v-text-field 背景颜色在给定值后发生变化

Question

我正在使用 vuetify 创建登录表单，并使用 v-text-field 作为输入。 当有字段建议时会出现问题：

例如，我在浏览器中保存了多封电子邮件，它会在电子邮件字段中为我提供这些电子邮件的建议，到目前为止一切都很好。 但是当我选择其中之一时：

查看字段的背景颜色从白色变为浅蓝色。

我希望有一种方法可以禁用此行为，因为我的网站上有深色背景，而且当背景发生变化时，它会非常难看。 我试图在HTML中找到该元素并更改样式，但没有生效。

Answer 1

看起来您正在使用 Google Chrome（或其他基于 webkit 的浏览器）。它来自 Chrome 中的自动完成功能，与 vuetify 库无关。

您可以使用 CSS 解决此问题（至少在 Google Chrome 83 中）。

如果您想手动覆盖背景颜色，您可以通过内部 box-shadow 将其重叠。将 box-shadow 的 spread-radius 设置为超过 30px 是没有意义的（仅当您的字段大小非常大时）：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 30px #ffffff inset !important;
}

但是如果你想让你的输入背景透明，你可以设置另一个 CSS 属性：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-background-clip: text;
}