Change Input background to transparent on autocomplete form

Question

i wanted to set the background color to transparent to my input when the browser autocomplete my form, currently looks like the image added, anyone know how to accomplish this?

I've tried this but it set to white and the borders are style with the yellow default, i want the color for the text to be white too.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

This is how it looks:

enter image description here

Thanks in advance :)

yes transparent but this is the example i found, so i need it transparent with white text in the input — martinezjc, Apr 11 '15 at 17:17
`-webkit-text-fill-color`? and `background-color`? Possible duplicate: http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete — Downgoat, Apr 11 '15 at 17:20

score 71 · Accepted Answer · answered Apr 11 '15 at 17:28

71

Finally i get the result with this piece of code:

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

answered Apr 11 '15 at 17:28

martinezjc

3,415
3
21
29

1

what this: 5000s in background-color – Danilo Pádua Dec 10 '15 at 10:05
1

The transition time that will take to remove the background color – martinezjc Dec 10 '15 at 14:26
1

no flaws. fine working after tested almost 20 solutions in chrome – Janen R May 23 '18 at 05:57
it worked for me. And the tip for whom wants to change cursor color is the following: `caret-color: #fff;` – Mukhriddin Shakhriyorov Jun 29 '22 at 07:38

score 30 · Answer 2 · answered Jul 01 '17 at 14:25

30

use this to save your time

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;
}

answered Jul 01 '17 at 14:25

wahmal

809
11
27

This is so simple and works perfect! Best solution IMO. – Rick Kukiela Aug 19 '18 at 08:20
Not only did this seem to be the only one that worked for me, it's damn short! – heyron Oct 13 '20 at 11:17
Thank you for being such a good person. autofill is just... you know. – Joel Carneiro Mar 31 '21 at 20:02
This one should be the best answer – Dawid Krajewski Feb 05 '22 at 14:20
Is transparent by default thanks god! – Matx Mar 29 '23 at 20:04

score 21 · Answer 3 · edited May 23 '17 at 12:02

21

thanks martinezjc for the idea, but if we leave page opened for some time we will notice backround change

we can eliminate transition using css animation and forwards fill mode to make background color permanent

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

just replace transparent with your color

edited May 23 '17 at 12:02

Community

1
1

answered Apr 25 '17 at 09:45

ForceUser

1,129
1
15
23

2

Nice i like this. It's amazing all the crap we have to go through just to change a color. – Eric Guan Nov 02 '17 at 21:16
This solution is more stable. 1. This won't change color after a time 2. If you try to fill an address with name, address, phone etc then this solutions ROCKS (First solution only prevent color change in changed field). – CaptainZero May 19 '19 at 10:36
perfect! Thanks. – Vishal Mar 17 '20 at 11:37
1

@CaptainAdmin Note that this solution does not work at all in desktop Safari. – Fer Apr 05 '20 at 20:50

score 5 · Answer 4 · answered Aug 02 '17 at 02:19

After hours of searching, here is the best code that works jquery and javascript meaning it makes the field transparent as requested

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

Perfect good

Change Input background to transparent on autocomplete form

4 Answers4

Linked