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

Question

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

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

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

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

Answer 1

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

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

如果你想手动覆盖背景颜色，你可以通过内部盒子阴影重叠它。将 box-shadow 的扩展半径设置为超过 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;
}