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

Question

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

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

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

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

Answer 1

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

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

如果您想手动覆盖背景颜色，您可以通过内部框阴影重叠它。将 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;
}