vuetify v-text-field background color changes after giving a value

user_10246394 0
Viewed 2555

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 :

enter image description here

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 :

enter image description here

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

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.

vuetify.js css html
1 Answers

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.

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

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

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