Form input autofill background color in Chrome

[ahmadx87]

Hi,
I’m building a form for login. The chrome autofill for email and password is ruining my UI and I googled a lot but to no avail. I took a look at github issues and saw that it was an issue in beta versions and must have been solved. But now I’m using chrome 83 and I have this issue.

Am I doing something wrong?

Here is the markup

<template>
  <q-form @submit.prevent="login" class="q-gutter-md">
    <q-input color="primary" v-model="email" label="Email" />
    <q-input v-model="password" label="Password" :type="hidePass ? 'password' : 'text'">
      <template v-slot:append>
        <q-icon
          :name="hidePass ? 'visibility_off' : 'visibility'"
          class="cursor-pointer"
          @click="hidePass = !hidePass"
        />
      </template>
    </q-input>
    <div class="text-center q-mt-lg">
      <q-btn type="submit" color="primary" class="full-width">Login</q-btn>
    </div>
    <div class="text-center">
      <q-btn text flat no-caps size="small" class="q-mt-sm">Forgot your password?</q-btn>
    </div>
  </q-form>
</template>

and this is the result

[metalsadman]

@ahmadx87 https://quasar.dev/vue-components/form#Turning-off-Autocompletion

[ahmadx87]

@metalsadman Thanks for your input. I don’t want to disable autocomplete. It would be inconvenient for users to be unable to use their browser password managers.
It is actually getting rid of the problem instead of solving it.

[jeffatpf]

@ahmadx87, I add:

$form-autofill = #000000

to my quasar.variables.styl and this does the trick.

[ahmadx87]

@jeffatpf Thanks, good point. It didn’t work though, i think this variable is for older versions of Quasar. I searched the docs variables section. it seems to be $input-autofill-color but it doesn’t work. Something might have been changed in newer versions of chrome or there is a bug in Quasar. Or maybe I’m doing something wrong.

[Jessica]

HI! I also got the same problem, did you fix it?

[whoacowboy]

I agree, an official fix for this would be great. I too wanted to keep autocomplete enabled and not have Chrome break the UI. Here is how I did it.

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-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0 1000px $backgroundColor inset !important;
  transition: background-color 300ms ease-in-out 0s;
}
.q-field--outlined .q-field__control:before {
  z-index: 1;
}

[rodrigoroma]

+1 for solving this

[Manieck]

HI! I also got the same problem, Does anyone know how to solve it?

[dobbel]

@Manieck

You could create a github issue.