CODEWITHSUNDEEP
htmlcssvuetify.js
Imu Sama
Imu Sama

Reputation: 364

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

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.

Upvotes: 2

Views: 4064

Answers (1)

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

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

Upvotes: 6

Related Questions