CODEWITHSUNDEEP
css
Nemanja G
Nemanja G

Reputation: 1850

Input background removed by Chrome autofill

I am working with some login/reset password/confirm password forms, and I would need autofill not to remove my background image on input fields. I used this piece of code to make the background transparent, but is there a way to save the current image?

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #fff !important;
}

My Input field:

input {
 width: 425px;
 height: 40px;
 margin-bottom: 30px;
 line-height: 40px;
 border: 0;
 border-bottom: 1px solid #393939;
 outline: none;
 color: #fff;

 &.ng-invalid.ng-dirty.ng-touched,
 &.ng-invalid.ng-touched{
 border-bottom: 1px solid red;
 }
 &.password{
 background: url('../../assets/img/password.png') no-repeat;
 }
 &.email{
 background: url('../../assets/img/mail.png') no-repeat;
 }
}

Thanks in advance.

Upvotes: 1

Views: 3652

Answers (3)

Keerthi Reddy Yeruva
Keerthi Reddy Yeruva

Reputation: 879

Try this!

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 5000s ease-in-out 0s;
  transition-property: background-color, color;
}

Upvotes: 0

Nox
Nox

Reputation: 23

After researching on the web and didn't found a single solution to make it transparent, I tried by myself and reached the desired result using an animation (which is forwards) and it works. A forwards animation has more weight than importants or natives properties, so we can force the background to be transparent. (You can also change the text-color with -webkit-text-fill-color)

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    /* -webkit-text-fill-color: black; */ /* You can change text color here */
    animation: input_background_autofill 0s forwards;
}
@keyframes input_background_autofill {
    100% { background-color: transparent }
}

Then in your case, you just need to wrap your input field into another div which contains the background image, considering the fact it is now transparent, you'll see the image behind the autofilled inputs.

Hope it'll help.

Upvotes: 1

Tobias Glaus
Tobias Glaus

Reputation: 3628

Because I cant comment due to lack of reputation, I post an answer:

I think that should work: (You dont need to use background-color to change that yellowish background. You can do that with box-shadow)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -moz-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    /* change the white to any color */
}

To change the text color, use:

-webkit-text-fill-color: green !important;

Or if you don't want autofill at all you can set this in your HTML:

<form autocomplete="off">...</form>

Upvotes: 1

Related Questions