vuetify v-text-field 给定值后背景颜色变化 [英] vuetify v-text-field background color changes after giving a value

问题描述

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

I am using vuetify to create a login form and I use v-text-field for the inputs. The problem happens when there are suggestions for a field :

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

For example I have multiple emails saved in my browser, it will give me suggestions of these emails on an email field, all good so far. But when I select one of them :

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

See the background color of the field went from white to light blue.

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

I hope there is a way to disable this behaviour because I have a dark background on my website and when the background changes it's very ugly. I tried to find the element in the HTML and change the style but it doesn't take effect.

推荐答案

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

Looks like you are using Google Chrome (or another webkit-based browser). It comes from autocomplete feature in Chrome and not related to vuetify library.

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

You can fix this issue (at least in Google Chrome 83) using CSS.

如果你想手动覆盖背景颜色，你可以通过内部框阴影重叠它.将 box-shadow 的 spread-radius 设置为超过 30px 是没有意义的(仅当您的字段大小非常大时):

If you want to manually override background color, you can overlap it by internal box-shadow. It makes no sense to set box-shadow's spread-radius to more than 30px (only if the size of your field is really huge):

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 属性:

But if you want to make your input background transparent, you may set another CSS prop:

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;
}

这篇关于vuetify v-text-field 给定值后背景颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！