Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to remove blue background on chrome autocomplete

I am making a form and want each input to have be transparent but when I use the autocomplete feature in Chrome and then tab into the next field, the previous field gets a pale blue background.

I have tried using:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}  

but this doesn't work. I don't want a white background I want it remain transparent when clicking into another input and setting the color to transparent doesn't work either.

How can this be achieved?

like image 781
PumpkinBreath Avatar asked Mar 12 '19 23:03

PumpkinBreath


People also ask

How do I remove autofill in Chrome CSS?

Autocomplete is disabled with autocomplete="off". AUTOFILL will prompt based on the address book from previously filled out similar forms on other pages. It will also highlight the fields it is changing. Autofill can be disabled with autocomplete="false".

How do I turn off autofill in CSS?

You can also disable autocomplete for an entire form by turning it off at the top form level like this: <form autocomplete="off" action="...">

How do I turn off Autocomplete input?

Use the <input> tag with autocomplete attribute. Set the autocomplete attribute to value “off”.

How would you set a purple background color to an element?

You can set a background color for an HTML document by adding style="background-color:" to the <body> element.


1 Answers

Google seems to have done some magic with the shadow property. This made it work for me:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
like image 125
phifa Avatar answered Sep 22 '22 01:09

phifa