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
– martinezjc, Commented Apr 11, 2015 at 17:17
-webkit-text-fill-color? and background-color? Possible duplicate: stackoverflow.com/questions/2781549/… — Downgoat
– Downgoat, Commented Apr 11, 2015 at 17:20

martinezjc · Accepted Answer · 2015-04-11 17:28:36Z

77

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, 2015 at 17:28

martinezjc

3,5953 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Danilo Pádua Over a year ago

what this: 5000s in background-color

martinezjc Over a year ago

The transition time that will take to remove the background color

Janen R Over a year ago

no flaws. fine working after tested almost 20 solutions in chrome

Mukhriddin Shakhriyorov Over a year ago

it worked for me. And the tip for whom wants to change cursor color is the following: caret-color: #fff;

wahmal · Accepted Answer · 2017-07-01 14:25:09Z

34

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 1, 2017 at 14:25

wahmal

97712 silver badges28 bronze badges

4 Comments

Rick Kukiela Over a year ago

This is so simple and works perfect! Best solution IMO.

heyron Over a year ago

Not only did this seem to be the only one that worked for me, it's damn short!

Joel Carneiro Over a year ago

Thank you for being such a good person. autofill is just... you know.

Dawid Krajewski Over a year ago

This one should be the best answer 👍

Community · Accepted Answer · 2017-05-23 12:02:43Z

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, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 25, 2017 at 9:45

ForceUser

1,1491 gold badge15 silver badges23 bronze badges

4 Comments

Eric Guan Over a year ago

Nice i like this. It's amazing all the crap we have to go through just to change a color.

CaptainZero Over a year ago

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).

Fer Over a year ago

@CaptainAdmin Note that this solution does not work at all in desktop Safari.

matez Over a year ago

stopped working on firefox with recent updates ;/

Patrice Jaumotte · Accepted Answer · 2017-08-02 02:19:23Z

5

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

answered Aug 2, 2017 at 2:19

Patrice Jaumotte

751 silver badge1 bronze badge

Comments

Vasanth 26 · Accepted Answer · 2023-12-27 09:44:43Z

2

GOT THE ANSWER GUYS.. :)

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0) inset !important;
  background-color: transparent !important;
  background-clip: text;
}

answered Dec 27, 2023 at 9:44

Vasanth 26

211 bronze badge

3 Comments

soundflix Over a year ago

Please try to explain what are the advantages of your solution over the others.

Doğa Korkmaz Sep 28 at 17:43

advantage is it works

Duane Martin Jan 29 at 18:28

thanks mate this working worked with in Nextjs 15 after trying all the of the above codes which dint not work for me :)

Collectives™ on Stack Overflow

Change Input background to transparent on autocomplete form

5 Answers 5

4 Comments

4 Comments

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related