我正在使用 vuetify 创建登录表单,并使用 v-text-field 作为输入。 当有字段建议时就会出现问题:
例如,我的浏览器中保存了多封电子邮件,它会在电子邮件字段上为我提供这些电子邮件的建议,到目前为止一切都很好。 但是当我选择其中之一时:
看到字段的背景颜色从白色变为浅蓝色。
我希望有一种方法可以禁用此行为,因为我的网站上有深色背景,当背景更改时它非常难看。 我尝试在 HTML 中找到该元素并更改样式,但没有生效。
最佳答案
您似乎使用的是 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;
}
关于html - vuetify v-text-field 给定值后背景颜色发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62796362/