Add background image to input fields with Autofill in mobile browsers - default yellow background removes them

问题

As we all know, modern browsers add an ugly yellow background to text fields in which the visitor has used Autofill to fill in the fields for them.

Most of us also know the handy trick to override text color and background color. You can even add a background image which still appears in most modern desktop browsers:

input:-webkit-autofill {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    background-image: url('image.jpg');
}

But in mobile browsers (e.g. Mobile Safari on iOS, Chrome on Android), whether you use this code or leave the default yellow background color, the image disappears.

Does anyone know a way to force the input field to continue to show the background image even when using Autofill?

(Please don't suggest removing Autofill from the field...obviously that fixes this but takes away functionality from the UX of my web application.)

回答1:

I'm had the same problem and solved it by just putting !important in my css. Now image background also show up on mobile device.

input:-webkit-autofill {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    background-image: url('image.jpg') !important;
}

来源：https://stackoverflow.com/questions/32341749/add-background-image-to-input-fields-with-autofill-in-mobile-browsers-default