Make yellow autocomplete transparent in Google Chrome

Question

This is the textarea

This is the textarea that is clicked on and has text in it

When Google chrome's autocomplete hijacks the textarea

I've tried fixing it by putting in this code

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

But the best I can get it to look like is this

I want the white box to either be transparent, or it can stay white but be smaller so that it does not block any of the blue parts of the textbox. Is this possible at all? I've tried googling around and I came up with nothing. Or if you guys have any other ideas on how to fix this, that would be great!

Also, if there is a way to make the autocomplete box just a little bit smaller that would be fine too, or maybe a way to move the label down ? =/

I want autocomplete on.

did you try `backgound-color:rgba(0,0,0,0)` for the autocomplete? — j_s_stack, Jan 29 '15 at 00:26
@j_s_stack that just makes it go to the default yellow auto complete — DanMossa, Jan 29 '15 at 06:46
Try looking at the style of the element when it is yellow and look at what css property is making it yellow. Than take the appropriate measures. — www139, Jan 31 '15 at 17:03
have you figured it out? Did my updated answer not work? Is there anything else I can do to help? — www139, Feb 10 '15 at 15:58

score -1 · Accepted Answer · edited May 23 '17 at 11:54

-1

try this: background-color: #fff !important;

http://labs.enonic.com/articles/remove-forced-yellow-input-background-in-chrome

Removing input background colour for Chrome autocomplete?

Are you sure I found this: Google Chrome form autofill and its yellow background

edited May 23 '17 at 11:54

Community

1
1

answered Feb 04 '15 at 14:58

www139

4,960
3
31
56

1

input:-webkit-autofill { background-color: #fff !important; } Does not do anything. – DanMossa Feb 05 '15 at 07:11
1

Are you sure you have the selector correct? – www139 Feb 05 '15 at 14:37
1

Are you sure I found this: http://stackoverflow.com/questions/2920306/google-chrome-form-autofill-and-its-yellow-background – www139 Feb 05 '15 at 14:39
1

http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – www139 Feb 05 '15 at 14:41
1

http://labs.enonic.com/articles/remove-forced-yellow-input-background-in-chrome – www139 Feb 05 '15 at 14:42
1

Look at those links. They talk about your problem. – www139 Feb 05 '15 at 14:42
this answer is not correct – Attenzione May 28 '15 at 09:33

score -3 · Answer 2 · answered Jan 30 '15 at 02:26

-3

Please try this:

input:-webkit-autofill {
    -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}

rgba fourth argument is opacity level.

answered Jan 30 '15 at 02:26

mertyildiran

6,477
5
32
55

Goes to the default yellow autocomplete – DanMossa Jan 30 '15 at 04:59

score -3 · Answer 3 · edited Feb 07 '15 at 00:29

-3

also try:

input:-webkit-autofill {
   background:rgba(255,255,255,0) !important;
}

edited Feb 07 '15 at 00:29

skrrgwasme

9,358
11
54
84

answered Feb 06 '15 at 20:51

scooterlord

15,124
11
49
68

Make yellow autocomplete transparent in Google Chrome

3 Answers3